Vuetable-2: Transition issues between 1.6.5 and 2.0.0-beta.1

[zxc23]

I'll be actively updating this thread as I (hopefully) solve the problems I currently have.

I'm using vuetable-2 in a desktop app (electron + webpack) with data mode. Vue version 2.5.13. I've tweaked quite a few things over time to get the behaviour I wanted so I imagine some of my problems could be unique to my codebase. I'll number them for easier referencing.

1. On displaying all my dynamic tables:

[Vue warn]: Error in render: "TypeError: Cannot read property 'replace' of undefined"
found in
---> <VuetableColGroup>

TypeError: Cannot read property 'replace' of undefined
    at VueComponent.columnClass 

I thought maybe this was related to data formatting, but it's unclear. The formatting appears correct (after I changed 'callback' to 'formatter' and removed instances of string value instead of function).

_I neglected to add a name property to my recently new field component. Resolved now._

2. Pagination not working the first time a table is displayed.

This is possibly related to the fact that the table doesn't have data on mount, not until after. It corrects itself if I reload:

this.$nextTick(() => {
  this.$refs.table.reload()
})

which is called on a watch() on the table data.

The tablePagination object accessed in the pagination component is null initially.

3. Changing page results in this error:

[Vue warn]: Duplicate keys detected: '1'. This may cause an update error.
found in
---> <Vuetable>

This is when the next page has two rows. When it has seven rows:

[Vue warn]: Duplicate keys detected: '1'. This may cause an update error.
[Vue warn]: Duplicate keys detected: '2'. This may cause an update error.
[Vue warn]: Duplicate keys detected: '3'. This may cause an update error.
[Vue warn]: Duplicate keys detected: '1'. This may cause an update error.
[Vue warn]: Duplicate keys detected: '2'. This may cause an update error.
[Vue warn]: Duplicate keys detected: '3'. This may cause an update error.

Number of errors seems to be number of rows - 1.

One thing is that I have my own initial page implementation, and current page is tracked in my pagination component and kept in sync with the pagination in vuetable.

4. Some kind of warning about my data which mentioned using track-by to fix it.

I added track-by='id' and it has gone away. But I wonder if this is related to problem 3 and I haven't properly addressed this. All the rows have an id field which is not displayed (not in 'fields' but in the data objects themselves). I will try adding ID to fields and setting visible=false.

[ratiw]

1) Vuetable is trying to generate a specific CSS class name for one of your column by guessing from the name option of field definition or the "name" of the component. So, please check all name option of your fields definition if any of them is not a string, or the component object you specified in the name option does not have a "name" key.

2) Since you're using Data mode, that probably is the case.

3) Check your pagination component implementation again.

4) Need to see the actual error message and some of your data in order to identify if they're related.

[zxc23]

1. I neglected to add a name property to my new field component. Error's gone now. Thanks 👍

Looking into the rest currently.