vue.js - 如何使用 Vue JS 自动选择值选择选项

Question

我有两个 API 请求。

其中一个带来了整个设计师名单，一个带来了相关系列的信息。

我希望相关集合中的设计师 ID 列表与我在相关选择元素中给出的列表相匹配，并添加自动选择操作。

请帮助我:) 抱歉英语不好。

我的选择元素..

<select class="form-control mt-2" v-model="designerSelected" id="designerBox">
      <option
      v-for="designer in designerArray"
      :key="designer.designer_id"
      :value="designer.designer_id"
    >
      {{ designer.designer_firstname + " " + designer.designer_lastname }}. 
     </option>
</select>

我的收藏 API

axios
  .get("XXXXXXX")
  .then(response => {
    this.name = response.data[0].XX
    this.short = response.data[0].XX
    this.singleImage = response.data[0].XX
    this.textEditor = response.data[0].XX
    this.designerSelected = response.data[0].collection_designer; ( Come Designer ID )
  })
  .catch(error => {
     console.log(error);
  })

我的设计师 API

runDesignerAPI() {
      axios
        .get("XXXXXXXXX")
        .then(response => {
          this.designerArray = response.data;
        })
        .catch(error => {
          console.log(error);
        });
    },

标签： vue.js

Answer 1

匹配:value相同类型的v-model：

<select class="form-control mt-2" v-model="designerSelected" id="designerBox">
      <option
        v-for="designer in designerArray"
        :key="designer.designer_id"
        :value="designer"
      >
        {{ designer.designer_firstname + " " + designer.designer_lastname }}. 
     </option>
</select>

https://es.vuejs.org/v2/guide/forms.html#Select-1