[BUG] - Vue-Tabulator don't remove old column, if I install new options.

[aalopatin]

Hi!

I try to change a set of columns in the options of the tabulator.
When I add new columns it works, but when I remove column from options, they aren't removed.

Here is part of my code.

I have a method - setPeriods(), which set columns in the options object.

setPeriods() {
    let length = this.optionsDataReports.columns.length
    let columnsPeriods = this.selectedPeriods.map((period) => {
      return COLUMNS_ENTER_REPORTS.columnPeriod(period.id, period.id)
    })
    this.optionsDataReports.columns.splice(1, length-1, ...columnsPeriods)
},

If new Periods are added in selectedPeriods it work correct:

But if I delete columns, tabulator instance isn't updated:

But the options object is updated in Vue:

I can't solve this problem. Can you help me?

[aalopatin]

I don't know if it's Vue-tabulator or Tabulator problem.

[angeliski]

Hey @aalopatin
Can you try reproduce that behavior in fork fiddle? https://jsfiddle.net/angeliski/z8wbvr10/

[aalopatin]

Hey @angeliski
I've added buttons Add and Remove

Add - adds 2 columns to replace everything after the second column
Remove - adds 1 column to replace everything after the second column

If click Remove and then Add it works
But if click Add and then Remove it doesn't work

https://jsfiddle.net/utqr2ywh/3/

[angeliski]

Thanks @aalopatin

I will try find the bug

[BryceBarbara]

@angeliski It looks a bug contributing to this is in this line: https://github.com/angeliski/vue-tabulator/blob/dev/src/components/TabulatorComponent.vue#L58

instead of

...mergeWith(this.eventOptions, this.options, merge),

try doing

...mergeWith({}, this.eventOptions, this.options, merge),

[angeliski]

Hey @BryceBarbara Thanks for the advice
I will try to get that