This is not a problem with QTable, but with Vue’s reactivity system.
Its a common pitfall and thankfully this will be improved when Vue 3.0 comes out (I think).
You can read about it here: https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats
The example in the link deals with exactly your problem: You initialize your objects in this.prefixes
as objects having the properties timelines
and prefix
, so they are reactive automatically (that is Vue sets up it’s change-detection-system for them).
Then you assign a new property rpki
using this.prefixes[key].rpki = '1'
– this is not reactive in Vue 2.x !! So when you change that property later, Vue doesn’t notice it.
One way to solve your problem is by explicitly telling Vue that your objects have a new property. For this, Vue provides an alternative way of assigning values to object properties:
In refreshAPwidget()
, replace
this.prefixes[key].rpki = '1'
with:
this.$set(this.prefixes[key], 'rpki', '1')
On a similar note, it is better to write this.$delete(this.prefixes[key], 'timelines')
instead of delete this.prefixes[key].timelines
, but this doesn’t affect your example.