如何通过选择输入设置2个数据值？

Question

我正在使用VueJS从我的Laravel API中获取数据。它是一个带有对象的数组。我有一个选择元素，我在选项元素上使用v-for。 v模型位于select元素上。

当我选择选项中的一个时，我想设置2个数据属性，但是我不知道该怎么做。

我已经尝试设置计算属性，但是它不起作用，或者我做错了。

模板：

<div class="col-4">
     <label for="name">Customer</label>

     <select class="form-control" v-model="form.customer">
          <option disabled value>Select the Customer</option>
          <option v-for="customer in customers" :key="customer.id">{{ 
                  customer.customer }}</option>
     </select>
</div>

数据：

data: () => {
    return {
      customers: [],
      form: {
        customer: "",
        color: "#ff8080",
        job: "",
        start_date: "",
        deadline_date: "",
        delivery_date: "",
        boilermaker: ""
      }
    };
  },

当我从选项列表中选择客户名称时，我想设置form.color。

Answer 1

您不能返回两个参数，我知道的唯一方法是捕获@change事件，然后从数组中获取所需的值：

<div class="col-4">
     <label for="name">Customer</label>

     <select class="form-control" v-model="form.customer" 
      @change="setColor($event.target.value)"
      >
          <option disabled value>Select the Customer</option>
          <option v-for="customer in customers" :key="customer.id">{{ 
                  customer.customer }}</option>
     </select>
</div>

和在方法下：

methods:{

   setColor(customerName){
    this.from.color =   this.customers.find(x=>x.customer===customerName).color
},

}