Aktualisierten Wert bei Klick anzeigen

Question

Ich habe eine Funktion, die Artikel zu einem Warenkorb hinzufügt, wenn ein Artikel bereits im Warenkorb ist, erwarte ich, dass er nur 1 zur Menge dieses Artikels hinzufügt (was er tut).

Das Problem ist, ich kann die aktualisierte Menge nicht sehen, bis es eine andere Aktion gibt, wie das Hinzufügen eines anderen Artikels zum Warenkorb.

Ich folgte Lösungen von similar question, funktioniert aber immer noch nicht für mich.

Ich möchte in der Lage sein, den aktualisierten Wert anzuzeigen, sobald das Element hinzugefügt wird.

addItemToCart : function(item){ 
     if(this.cart.includes(item)){ 
      item.quantity += 1; 
      console.log(item.quantity); 
     } 
     else{ 
      this.cart.push(item); 
      this.set(item.quantity = 1); 
     } 
}, 

HTML:

<ul> 
    <li>Cart is empty</li> 
    <li v-for="item in cart"> 
     {{item.name }} 
     <span class="pull-right"> 
     ({{ item.price }} x {{ item.quantity }}) 
     <i class="glyphicon glyphicon-remove cart-item-action" @click="removeItemFromCart(item)"></i> 
    </span> 
    </li> 
</ul> 

Answer 1

Ich glaube, dies wegen caveats Änderungserkennung in vue geschieht.

Aufgrund von Einschränkungen in JavaScript, Vue kann die folgenden Änderungen an ein Array nicht erkennen:

1. Wenn Sie ein Element mit dem Index direkt eingestellt, zum Beispiel

2. Wenn Sie die Länge des Arrays ändern, z. vm.items.length = newLength

Also, was Sie tun müssen, ist, Sie Index dieser Wagenposition in der Funktion addItemToCart und verwenden Vue.set wie folgt passieren können:

addItemToCart : function(item){ 
     if(this.cart.includes(item)){ 
      var index = this.cart.indexOf(item) 
      this.cart[index] += 1 
      Vue.set(this.cart, index, this.cart[index]) 
      //or 
      // this.$set(this.cart, index, this.cart[index]) 

      //or 
      // this.cart.splice(index, 1, this.cart[index]) 
      console.log(item.quantity); 

     } 
     else{ 
      this.cart.push(item); 
      this.set(item.quantity = 1); 
     } 
},