クリックして更新された値を表示

Question

私はカートにアイテムを追加する機能を持っています。アイテムがすでにカートに入っているときは、そのアイテムの量に1を加算するだけです。

カートに別のアイテムを追加するなどの別の操作が行われるまで、更新された数量を表示できないという問題があります。

私はsimilar questionの解決策に従っていますが、まだ私のためには機能しません。

アイテムが追加された直後に更新された値を表示したいと考えています。

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

私はこれが原因VUEの変化検出のcaveatsで起こっていると考えています。あなたが直接、例えば、インデックスに項目を設定した場合

1. ：原因はJavaScriptの制限により、Vueのは、アレイに次の変更を検出することはできません

   vm.items[indexOfItem] = newValue

2. たとえば、配列の長さを変更すると、次のようになります。 vm.items.length = newLength

だから、あなたが何をする必要があるか、あなたが機能addItemToCartにそのカートの項目のインデックスを渡すと、次のようVue.setを使用することができ、次のとおりです。

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); 
     } 
},