A
A
asferot2019-01-14 16:27:28
Vue.js
asferot, 2019-01-14 16:27:28

How to "separate" v-model from each other?

There is a list of products that is pulled from the database. When adding this product to the general list, an input field appears for each product so that a person can enter a quantity and the price is calculated according to this quantity. But the problem is that the v-model is the same for everyone and, therefore, the field is automatically filled in the same way for everyone. How to avoid it? It is necessary that each input field be independent of the others.
Here is the code:

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

Answer the question

In order to leave comments, you need to log in

1 answer(s)
R
Ruslan Makhin, 2019-01-14
@asferot

You use v-for
You can get index in addition to item
And now you can declare a variable of type an array of objects

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

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

It's like one of the solutions.
It's not the best_) (PySy: far from the best, it can be more concise)

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question