Updating the object does not result in the interpolation value being updated as well

Question

Updating the object does not result in the interpolation value being updated as well

I am facing an issue with this v-for loop:

<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>

In my script section, I have the following method:

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

Even though console.log(quantity) shows that the quantity is decrementing correctly, the value in interpolation is not updating. How can I resolve this issue?

javascript vue.js

Answer 1

Answer №1

I tested out this code and created a Pen based on it. Everything is functioning well - clicking the minus sign reduces the quantity in the text box. Check it out here: 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--
}
  }
})

Additional Note: I also noticed that adding td elements inside tr is crucial for the code to work properly. Removing them results in a malfunction.

Answer 2

I tested out this code and created a Pen based on it. Everything is functioning well - clicking the minus sign reduces the quantity in the text box. Check it out here: 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--
}
  }
})

Additional Note: I also noticed that adding td elements inside tr is crucial for the code to work properly. Removing them results in a malfunction.

Updating the object does not result in the interpolation value being updated as well

Answer №1

Similar questions

Different method of including the ng-click attribute on the body element

Save the selected value from the dropdown menu and automatically check the corresponding checkbox when it

Issue with Angular: Mobile view toggle button in the navbar is unresponsive

ReactJS not displaying the class effect as intended

Array of notifications in Vue framework

Tips for accessing touch events within the parent component's area in React Native

What is the reason that property spreading is effective within Grid components but not in FormControl components?

Having difficulty positioning the Divider correctly among Grid items

Transform the infoBox into a jQuery dialog modal window

Guide to toggling the anchor tag functionality as a button with JavaScript

Issue with undefined bindingContext.$data in IE9 on knockout binding handler

How can I use HTML and jQuery to send a button click event to a .py file using AJAX and cgi in web development?

What is the best way to receive a single response for various API endpoints?

Avoiding the duplication of selected items in a dropdown within a gridview can be achieved effectively by implementing a JavaScript/jQuery

What is the significance of -= and += operators in JavaScript programming language?

When initially loaded, the Bootstrap Datepicker displays an inaccurate calendar

How can I determine the size of the custom options dropdown in Magento?

Alter the button ID based on the currently displayed div

What is the method to view all components within a Vue project displayed in a tree format?

What is the recommended value for the auto-incremented ID field when using the POST method in Node.js?