Vue公司JS 2列表呈現的問題

在做VUE JS 2 這裏一個簡單的購物車的應用程序時，我面臨的一個問題是我的代碼有：Vue公司JS 2列表呈現的問題

空白車項目陣列時，我按添加到購物車按鈕，然後該特定產品將被推入這個陣列。

data() { 
    return { 
     cartItems: [] 
    } 
}

添加到購物車方法：

methods: { 
    addToCart (product) { 
     product.quantity += 1 
     this.cartItems.push(product) 
    } 
}

模板視圖：在瀏覽器

<ul> 
    <li v-for="item in items"> 
     <pre> 
      {{item.name}} -- {{item.quantity}} 
     </pre> 
    </li> 
</ul>

，我得到這個：

注意：右側1和2的數值是該產品的數量 但我想要這樣的東西。

注：右側1和2的值是產品的

如果我使用的，而不是VUE JS VUE JS 1 2，則同樣的代碼給了我瀏覽視圖像第二截圖數量我附上。

請有人幫我解決這個問題。

來源

2017-07-07 Subhojit Mondal

您是如何創建新產品的？撥打addToCart時是否引用同一個對象，或者您是否進行某種深度複製或擴展？如果多次添加相同的參考文獻，它們將具有相同的數量。

v-for="item in items"這應該是如果你不使用僞代碼作爲例子。

來源

2017-07-07 05:13:35 Reiner

你能解釋清楚嗎？你能否給我舉個例子來幫助我。 –

這取決於你的電影的來源。您需要一個新對象或兩者顯示相同的數量。他們有一個相似的問題https://stackoverflow.com/questions/42611369/adding-new-objects-replaces-content-of-old-objects-vuejs-store – Reiner

問題是你將產品推向陣列兩次。檢查產品是否存在於cartItems數組中，如果不存在 - 添加，否則 - 更新產品數量

來源

2017-07-07 05:15:07

你能解釋清楚嗎？你能否給我舉個例子來幫助我。 –

https://jsfiddle.net/2mnh1qp9/ –

謝謝，兄弟你對我做了很大的幫助。其實，我已經錯過了你已經完成的那些「索引」邏輯。非常感謝。 :) –

Vue公司JS 2列表呈現的問題

回答

相關問題