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

【问题标题】：updating an Input field affects others, v-model更新输入字段会影响其他人，v-model
【发布时间】：2018-05-07 15:32:33
【问题描述】：

我有一个带有通过 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 () {
    return {
      quantity: 1
    }

【问题讨论】：

不要将计数绑定到同一个变量。没有任何代码真的帮不上忙。
@FINDarkside 我已经添加了我的代码示例，希望清楚
cartProducts 不应是产品数组，而应是 { product, quantity } 数组

标签： javascript vue.js

【解决方案1】：

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

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

【讨论】：

【解决方案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/

【讨论】：

质量胜于数量，很好 ?