Как я могу установить 2 значения данных с помощью выбора входа?

Question

Я использую VueJS для получения данных из моего Laravel API. Это массив с объектами. У меня есть элемент select, и я использую v-for для элемента option. v-модель находится на элементе выбора.

Я хочу установить 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
},

}