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

Я новичок в 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
  }
}

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


javascript vue.js vuejs2 vue-component v-for
person Osman Rafi    schedule 18.04.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Передайте весь 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}}
person Dan    schedule 18.04.2020
comment
Это работает @Dan. Спасибо! Не могли бы вы ответить мне еще на один вопрос, как можно удалить элемент из списка. вот как я думаю о материале https://codesandbox.io/s/crimson-http-srkz0?file=/src/App.vue. - person Osman Rafi; 18.04.2020
comment
Пожалуйста. Самый простой способ удалить такой: <button @click="products.splice(index, 1)">Remove</button>. Или вы можете передать индекс методу remove(index) и вызвать это: this.products.splice(index, 1) - person Dan; 18.04.2020
comment
Работает! Но как я могу использовать Vue.delete здесь, @Dan? - person Osman Rafi; 18.04.2020
comment
<button @click="$delete(products, index)">Remove</button>. Или вы можете передать индекс remove(index) методу и вызвать это: this.$delete(this.products, index) - person Dan; 18.04.2020