0

I have a Vuetify 1.5 data table with two columns, one is text only and one is a custom component - a multi-select box with a select-all at the top.

Without pagination this works absolutely fine (selects, saves, loads).

With pagination, the custom components on the first page are rendered correctly. The ones on subsequent pages are all blank.

I put a debug point in the created() method of the custom component and it is only hit 5 times, i.e. for those on page 1 only. Even when I go to the next page, the next 5 are not hit.

Must I trigger something manually for subsequent pages?

The page with my data table is very large, so I would rather not post the code, but I can try to make a trimmed-down version if necessary.

screenshot 1

On a subsequent page you can see in the Vue console that the selected items have been populated in the props, but are not being rendered on screen.

screenshot 2

I have tried this - does not help:

updatePagination() {
  if (this.$refs.multiSelects) {
    this.$refs.multiSelects.forEach((multiSelect) => {
      multiSelect.$forceUpdate();
    });
  }
},
hobbes_child
  • 131
  • 2
  • 12

1 Answers1

0

I found my own solution :)

Passing a unique :key to the component.

https://stackoverflow.com/a/48755228/1071463

hobbes_child
  • 131
  • 2
  • 12