Как правильно узнавать несколько значений с одного v-model

Question

Существует такая задача: На сайте нужно выбрать товар

<select name="item" v-model="select">
   <option v-for="item in items" :value="item.value">{{item.text}} ({{item.price}}$)</option>
</select>

data: {
  items: [
    {value: 1, text: "Товар 1", price: 100 },
    {value: 2, text: "Товар 2", price: 110 },
    {value: 3, text: "Товар 3", price: 120 },
  ],
},

Как при выборе товара узнавать цену? (Нужно ли использовать data-* и как получить к ним доступ?)

Answer 1

Как пример, в селекте можно хранить индекс массива. Таким образом, сможете получить все что хотите от выбранного элемента. Например так:

<select name="item" v-model="select">
   <option v-for="(item, key) in items" :value="key">{{item.text}} ({{item.price}}$)</option>
</select>
<p v-if="select !== null">Price: {{items[select].price}}

P.S в моем примере у свойства "select" значение по умолчанию null.
Либо сделать через watch. При изменения значения select, перебрать массив и найти нужный элемент с помощью фильтрации по value.

БЛОГ НА HUSL

Как правильно узнавать несколько значений с одного v-model

Ответы (1 шт):