Question

我是 Vue.js 的新手，我正在尝试使用 Vue 创建商店应用＆amp;的的WebPack 即可。我在json文件中有一些产品，并使用v-for呈现它们。

点击添加到购物车按钮时，应将产品编号和所选数量放入数组。

如何正确增加特定产品的数量？到目前为止，我有以下内容：

<template>
  <div v-for="(product, index) in products" >
    <div><img :src="product.product_image" /></div>
    <div>
      <input type="number" min="0" v-model="qty[index]" />
      <button @click="addToCart(product.id, qty[index])">Add to cart</button>
    </div>
  </div>
</template>


<script>

  import productList from '../products.json';

  export default{
    name: 'shop',
    data(){
      return {
        products: productList,
        cartElements: [],
        qty: [],
      }
    },
    props: [ 'itemsInCart' ],
    methods:{
      addToCart(product_id, quantity){
        this.cartElements.push( {
          "id" : product_id,
          "quantity" : quantity,
        } );
        console.log(this.cartElements);
      },
    },
  }
</script>

结果还可以，但输入字段表现得很奇怪。

e.g。如果我增加第三个产品的输入，它会将第一个和第二个产品输入设置为1，然后将第三个输入设置为所需的数字。

Answer 1

您希望qty = []指令自动填充v-model。尝试使用vuejs'created函数自己初始化该数组，如下所示：

<template>
<div v-for="(product, index) in products" >
    <div><img :src="product.product_image" /></div>
    <div>
        <input type="number" min="0" v-model="qty[index]" />
        <button @click="addToCart(product.id, qty[index])">Add to cart</button>
    </div>
</div>
</template>


<script>
import productList from '../products.json';
export default{
    name: 'shop',
    data(){
        return {
            products: productList,
            cartElements: [],
            qty: [],
        }
    },
    props: [ 'itemsInCart' ],
    methods:{
        addToCart(product_id, quantity){
            this.cartElements.push( {
                "id" : product_id,
                "quantity" : quantity,
            } );
            console.log(this.cartElements);
        },
    },
    created: function () {
        var i = 0;
        for (i = 0; i < this.products.length; i++){
            this.$set(this.qty, i , 0) // This is the vuejs-way of setting array values
        }
    }
}
</script>

Answer 2

所以在andresgottlieb的帮助下，我的最终代码如下：

<template>
<div v-for="(product, index) in products" >
    <div><img :src="product.product_image" /></div>
    <div>
        <input type="number" min="0" v-model="qty[index]" />
        <button @click="addToCart(product.id, qty[index])">Add to cart</button>
    </div>
</div>
</template>


<script>
import productList from '../products.json';
export default{
    name: 'shop',
    data(){
        return {
            products: productList,
            cartElements: [],
            qty: [],
        }
    },
    props: [ 'itemsInCart' ],
    methods:{
        addToCart(product_id, quantity){
            this.cartElements.push( {
                "id" : product_id,
                "quantity" : quantity,
            } );
            console.log(this.cartElements);
        },
    },
    created() {
        var i = 0;
        for (i = 0; i < this.products.length; i++){
            this.$set(this.qty, i, 0) // This is the vuejs-way of setting array values
        }
    }
}
</script>

使用v-model

2 个答案: