[Vuejs]-V-data-table-server not updating component in the table template

by

0👍

✅

OK, ChatGPT got it right.

When the table updates its data from the API, Vue tries to be as efficient as possible in re-rendering the components. In some cases, components with similar properties are re-used rather than destroyed and recreated. As a result, the created() lifecycle hook might not be called again when you change the page.

I added this to my EventDate.vue:

export default {
  ...,
  watch: {
    initialDate(newVal) {
      this.date = newVal;
    },
  },
  ...
}

And now both parts of the cell are updated when I navigate through table pages.

0👍

This is because you are using the same page number (page number 1) every time, that’s the reason the data is the same on every page.

mounted() {
  this.loadItems({ page: 1, itemsPerPage: 10 });
},

As I can see, you are taking the page number as props, so use prop data-

mounted() {
  this.loadItems({ page: this.page, itemsPerPage: 10 });
},

Let me know if this works.

Leave a comment