@asferot

Как «отделить» v-model друг от друга?

Есть список товаров, который подтягивается из БД. При добавлении этого товара в общий список, появляется поле input для каждого товара, чтобы человек мог ввести количество и ему посчиталась цена в соответствии с этим количеством. Но проблема в том, что v-model получается для всех один и тот же и, следовательно, поле заполняется автоматически у всех одинаково. Как этого избежать? Нужно чтобы каждое поле input было независимо от других.
Вот код:
tr(v-for="item in cartItems")
                td
                    img(:src="item.img" class="imgs")
                td
                    span {{item.title}}
                td
                    input(v-model="value")
                td
                td
                    span {{item.price}}
                td &#8381
                td
                    span {{sumValue}}
                td 
                    span(@click="removeToCart(item)" style="cursor: pointer") &#x2716
  • Вопрос задан
  • 212 просмотров
Решения вопроса 2
rusya_mahin_page
@rusya_mahin_page
WiRight - это все
Вы используете v-for

Вы можете помимо item получить index
v-for="(item, index) in cartItems"

А теперь Вы можете объявить переменную типа массив объектов

...
data: {
  items: []
}
...


И соответственно

...
input(v-model="items[index].name")
...


Это как один из вариантов решения
Он не лучший_) (ПыСы: далеко не лучший, можно и лаконичней)
Ответ написан
0xD34F
@0xD34F Куратор тега Vue.js
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы