Невозможно увеличить / уменьшить значение свойства данных в Vue

Question

Я новичок в Vue. js и столкнулся с простой проблемой в Vue реактивности. Я пытаюсь увеличить или уменьшить значение в свойстве данных, а также обновить другое зависимое значение в режиме реального времени. Вот моя демонстрация кода:

https://codesandbox.io/s/crimson-http-srkz0?file= / src / App. vue

<div v-for="(product,index) in products" :key="index" style="padding-top:10px">
   <button @click="decrement(product.quantity)">-</button> 
   {{product.quantity}}
   <button @click="increment(product.quantity)">+</button>
   {{product.title}} 
   costs ${{calculateSubtotal(product.price,product.quantity)}}
</div>

data(){
  return{
    products:[
      {
       title:'ball',
       quantity: 2,
       price: 25
      },
      {
       title:'bat',
       quantity: 1,
       price: 79
      },
    ]
  }
},
methods:{
  increment(n){
    return n+=1;
  },
  decrement(n){
    return n-=1;
  },
  calculateSubtotal(price,quantity){
    return price*quantity
  }
}

Ожидаемый результат: кнопки должны работать, чтобы увеличить или уменьшите значение и рассчитайте затраты в режиме реального времени. Кто-нибудь может мне помочь ? Заранее спасибо.

Answer 1

Передайте все product в методы:

<button @click="decrement(product)">-</button> 
{{product.quantity}}
<button @click="increment(product)">+</button>
{product.title}} 

И измените их следующим образом:

increment(p){
   p.quantity += 1;
},
decrement(p){
   p.quantity -= 1;
},

В противном случае метод получает только копию значения и изменив его вместо свойства объекта.

Вы можете сделать это без каких-либо методов, подобных этому:

<button @click="product.quantity--">-</button> 
{{product.quantity}}
<button @click="product.quantity++">+</button>
{{product.title}}