Checkbox status across pages

I use the record status from database to render the checkbox after loading all data. Everything displays well across pages. But when I change the checkbox value on one page, and go to a different page, the checkbox status somehow inherited from the changed checkbox status in the previous page.

For example, if all checkbox values are checked across all pages by default, I uncheck the 2nd checkbox on the 1st page, and go to another page, the 2nd checkbox on this page becomes unchecked for some reason.

<input type="checkbox" name="active[]" v-bind:value="row.id" :checked="row.status">

Anyone can help me with this?

Thanks a lot!

What does your code look like? Are you only changing a route parameter when going to the other page? Then the Vue component used on that page won’t be re-created, but you have to watch the route parameter to see when it changes, and then load the data.

Thanks for your reply.

Yes, I only change the page parameter when going to different page. All data were loaded on the first load and I used filter function to control the records displayed on each page:

filter((row, index) => {
            let start = (this.currentPage-1)*this.pageSize;
            let end = this.currentPage*this.pageSize;
            if (index >= start && index < end) return true;
        });

I thought all the checkbox status were set on the page load, and switch between pages shouldn’t affect their pre-set status, unless I change them on purpose.

Is this.currentPage properly assigned it’s new value when the route parameter changes? Is the call to the filter method in a reactive environment, so it re-runs when this.currentPage is assigned a new value?

Yes, this.currentPage was assign by a v-model binded select dropdown.

Filter function is under the computed property of the vue component.

computed:{
    sorted:function() {
        return this.rows.sort((a,b) => {
            let modifier = 1;
            if (this.currentDir === 'desc') modifier = -1;
            if (a[this.currentSort] < b[this.currentSort]) return -1 * modifier;
            if (a[this.currentSort] > b[this.currentSort]) return 1 * modifier;
            return 0;
        }).filter((row, index) => {
            let start = (this.currentPage-1)*this.pageSize;
            let end = this.currentPage*this.pageSize;
            if (index >= start && index < end) return true;
        });
    }
}

Data were loaded from the json call and stored in the this.rows under the created function.

I thought this.currentPage would come from the URL, but that’s apparently not the case.

If nothing in the computed property is dependent on the route parameter (or any other reactive variable which in turn is dependent on it), then that reactive property won’t re-run its function when you change the route parameter in the URL.

https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes

Thanks for your reply, finally get a fiddle to play with:

https://jsfiddle.net/t7hda9xp/4/

I’m using vue 2.7.14 by the way, and it seems this problem does not exist on version v2.2.1 but I prefer to use the latest 2.x version.

Thank you!

I now see that the problem can be seen int eh very first HTML code you posted ^^’ You are not using v-model on the checkbox, so when the user changes the state of the checkbox, that is not remembered in row.isChecked.

Well, the problem is vue does remembered the check status but on the wrong records.

I don’t need vue to handle the save the checkbox changes, there is a form handling the saving.

I managed to repeat this problem in the fiddle here:
https://jsfiddle.net/t7hda9xp/4/

At first I used the default vue 2.2.1 that fiddle has build-in, which has no problem at all, and then I manually switched to the latest v2 version 2.7.14, which is the version I’m using in my app, and then the problem appears.

I just tested all the 2.x version, it seems this problem starts from v 2.6.0. The last v2.5.22 version doesn’t have this problem, but not sure what caused this issue.

Have you tried using the key attribute? Maybe that fixes it.

It does!

I added the key to the for loop and now it works on the v 2.7.14!

Thank you so much!!