Bound checkboxes with Vue.js not updating

Question

It's difficult for me to lift out a chunk of code from my application to demonstrate this problem, so I hope merely my describing it it will be clear enough to elicit some useful feedback.

I have a table of products, populated from an array returned by an AJAX call. As part of the call, I add another property to each object in the array:

  _.each(this.productList, (product, index) => {
      product.selected = true;
  });

In my table HTML I have this:

<tr v-for="(product, index) in this.productList" :data-code="product.code">
          <td class='selected'>

            <input type="checkbox" :name="'selected'+index" v-model="product.selected">
          </td>
etc.

So the checkboxes use 'product.selected' as the model, and this has been set to true for each item in the array, hence the checkbox for each line is initially checked. I can click on the checkbox and it updates the underlying 'product.selected' property accordingly. All well and good so far.

My problem is with using a 'toggleSelection' function, fired by clicking a button, which is intended to check or uncheck all the checkboxes:

  toggleSelection(){
    this.allSelected = !this.allSelected; //initially set to true in data object
    _.each(this.productList, (product, index) => {
      product.selected = this.allSelected;
    });
  },

This would appear to do more or less the same as the initial AJAX call, i.e., loop through the productList array and set the 'selected' property of each product object in the array. And I can see from using the Vue dev tools in Chrome that it is doing exactly this, setting 'product.selected' to either true or false. The problem is, though, that it does not update the user interface - the checkboxes all remain checked even though the property each has been bound to has been changed from true to false.

This doesn't make any kind of sense to me. Why are the checkboxes not getting unchecked when the bound objects are changed?

This should be working. Are you binding productList or any of the elements in that array anywhere else? How do you initially set productList? It's not a computed property, right? — thanksd
– thanksd, Commented May 17, 2017 at 13:42
productList is in data, as []. I assign it via 'this.productList=data.productList' in the AJAX call. I'm not binding the productList anywhere else, no. As I said, the binding works the first time but not with updates to the array, which I don't understand. — John Moore
– John Moore, Commented May 17, 2017 at 15:52
Not sure why it is not updating. I couldn't see any issues at your code. Please have a look at this fiddle it's your code but it's fully functional. Maybe you can see what's different compared to your code. — AWolf
– AWolf, Commented May 20, 2017 at 22:04
Does it work with Firefox ? I have this pb with Chrome only, it is working in Firefox (v58, Nightly). — Ehvince
– Ehvince, Commented Oct 4, 2017 at 15:03

Ehab · Accepted Answer · 2019-10-06 09:37:46Z

2

I know its too late but it might help someone I had the same issue looked in the documentation didn't find anything

playing around with the code i found that there is a problem updating the DOM when bounded to new properties added to the orignal object "In your case the selected property"

my solution was load the data in new array then add the new properties to the same array then copy the new array to your array "declared in data object in your case this.productList"

var arr = []
this.loaddata(arr);    //this for example loads data from ajax call ,axios or whatever 
  _.each(arr, (product, index) => {
      product.selected = true;
  };

this.productList = arr.slice(); //copy the array

I don't know if its an issue in Vue

answered Oct 6, 2019 at 9:37

Ehab

911 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Steven Spungin · Accepted Answer · 2019-10-06 10:45:25Z

0

Replace product.selected = true; with Vue.set(product,selected,true);

If selected is not set at init, it will be falsy, but it will not be reactive.

Also Vue.set(product, selected, this.allSelected).

answered Oct 6, 2019 at 10:45

Steven Spungin

29.5k7 gold badges97 silver badges85 bronze badges

Collectives™ on Stack Overflow

Bound checkboxes with Vue.js not updating

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related