时间戳

首页 > 解决方案 > 当我更改对象中的某些内容时，我在插值中的值不会更新

javascript - 当我更改对象中的某些内容时，我在插值中的值不会更新

问题描述

我有这个v-for：

<tr v-for="(product, index) in products" v-bind:key="products.id">
   <div v-on:click="decrementQtd(index)" class="action-qtd-button-left">
       <strong>-</strong>
   </div>
   <div class="div-input-qtd">
       <input v-model="product.quantity" class="input-qtd-cart" type="text">
   </div>
</tr>

在我的脚本中：

methods: {
   decrementQtd: function (index) {
      this.products[index].quantity--
}

如果我做了一个console.log(quantity)递减好的，但插值中的值没有更新，我该如何解决这个问题？

标签： javascriptvue.js

解决方案

我根据这段代码制作了一支笔，它工作正常。单击 - 正在减少文本框中的数量。请在此处查看： https ://codepen.io/v08i/pen/KKwOgaw 

<div id="app">
  <table>
<tr v-for="(product, index) in products" v-bind:key="product.id">
   <td><div v-on:click="decrementQtd(index)" class="action-qtd-button-left">
       <strong>-</strong>
   </div>
   <div class="div-input-qtd">
       <input v-model="product.quantity" class="input-qtd-cart" type="text">
   </div>
    </td>
</tr>
  </table>
</div>

var app = new Vue({
  el: '#app',
  data: {
    name: 'Jonathan',
    products: [
      {
      id: 1,
      quantity: 10
      },
      {
      id: 2,
      quantity: 15
      },
      {
      id: 3,
      quantity: 25
      }
    ]
  },
  methods:{
     decrementQtd: function (index) {
      this.products[index].quantity--
}
  }
})

注意：我还在 tr 中添加了 td，如果删除它们，代码将停止工作。

推荐阅读