Question

我有一个带有通过v-model绑定的输入字段的购物车。当我增加一个产品的数量时，所有产品的数量也会更新，如何防止这种情况发生，以便我只更新一个产品的数量？我的Html

<div v-for="(product, index) in cartProducts" :key="index">
          <li>{{product.description}}</li>
          <input type="number"  v-model="quantity">
          <img src="imageurl" height="150">
          <br>
          <button type="button" class="btn btn-sm " disabled>{{product.price }}</button>

        </div>

vue data Property

data () {
    return {
      quantity: 1
    }

Answer 1

每个产品需要单独的数量，因此请将数量字段添加到产品中，然后绑定到该产品：

<input type="number"  v-model="product.quantity">

Answer 2

您可以使用.map为每个产品分配数量：

this.cartProducts.map(function(elem){
   elem.quantity = 1;
   return elem;
});

你的HTML中的

：

<input type="number"  v-model="product.quantity">

示例：https://jsfiddle.net/49gptnad/3945/

更新输入字段会影响其他人，v-model

2 个答案: