推到陣列V模型

我是新來Vue.js，我試圖創建一個應用程序商店與Vue公司 & 的WebPack。我在json文件中有一些產品，並使用v-for進行渲染。推到陣列V模型

當點擊添加到購物車按鈕，它應該把產品編號和選定的數量放到一個數組。

如何正確增加特定產品的數量？到目前爲止，我有以下幾點：

<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>

結果是正常的，但輸入字段會怪怪的。

例如如果我增加第三個產品的輸入，它將第一個和第二個產品輸入設置爲1，然後纔將第三個輸入設置爲所需的數字。

來源

2017-07-18 renataedit

也許你可以創建一個的jsfiddle使你能幫助的人瞭解你的問題，並得到更快的答案。我可以做出很多猜測，但我需要測試它。 –

起初'qty [index]'不存在，我想你必須先用'productList'在'created'初始'qty'！ – MHS

我不得不在沒有webpack的情況下做到這一點，但是使用簡單的vue.js，它會是這樣的：https：//jsfiddle.net/vo7y02eg/ – renataedit

您期待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>

來源

2017-07-18 20:21:48 andresgottlieb

謝謝！那一個工作！ :)我不得不修改2件事：把「var i = 0;」在for循環之前，並將「this.qty。$ set（i，0）」更改爲「this。$ set（this.qty，i，0）」 – renataedit

Cool it幫助你@renataedit，我修改了我的答案以反映你的2個修改 – andresgottlieb

因此，與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>

來源

2017-07-19 13:25:23 renataedit

推到陣列V模型

回答

相關問題