[Vuejs]-Page not re-rendering when data is updated — Vue.js

by

0👍

DTal, A couple of things to consider here. I noticed that you’re using selectedPage for both the page number and the page ID. It may be simpler to map both of these to two separate variables.

The other thing to consider is that you may also want to bind what book is selected as well. Vuejs won’t update the internals because it’s already done the v-for loop. If you bind one of the divs (using v-bind:) to a book, and keeping track of which book is selected in the data() area then it may have the behavior you want.

0👍

There were a lot of things to be fixed in the template to make your code run but the main thing missing which was not making it run was that (copying directly from Vue documentation)

Vue cannot detect the following changes to an array:

    1. When you directly set an item with the index, e.g. vm.items[indexOfItem] = newValue
    2. When you modify the length of the array, e.g. vm.items.length = newLength

Change detection runs only for property mutations

Which can be achieved using

vm.$set(vm.items, indexOfItem, newValue)

which in your case would be

if (event === "next") {
    this.$set(this.selectedPage, 1, this.selectedPage[1] + 1);
} else {
    this.$set(this.selectedPage, 1, this.selectedPage[1] - 1);
}

I definitely feel that you can maintain the page numbers in a more efficient way(but that is a different concern)

Leave a comment