如何使用 Vue JS 自动选择值选择选项答案

【问题标题】：How to automatic selected value Select Option with Vue JS如何使用 Vue JS 自动选择值选择选项
【发布时间】：2020-05-22 17:04:19
【问题描述】：

我有两个 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

【解决方案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

【讨论】：