Error: [vuex] do not mutate vuex Table Component

Windows 10 Fire Fox Developer Edition Bootstrap-Vue v2.0.0-rc.11

When we use the component Table with Row details support with Vuex strict, this error is showed:

Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] do not mutate vuex store state outside mutation handlers."

To see this error in console, just click in detail button, using a vuex data by getters in :items of b-table.

JSFiddle

Have one fix or workaround for this? Thanks.

[TheoBP]

This happens because the table component is trying to update the Vuex state directly, which is not allowed in strict mode. You would have to use a mutation:

https://jsfiddle.net/t1fzL5s6/

[TheoBP]

It’s not a workaround though, it’s how vue works. A property needs to be defined in order to be reactive. This is already mentioned in the docs.

Note: _If manipulating the _showDetails property directly on the item data (i.e. not via the toggleDetails function reference), the showDetails propertly must exist in the items data for proper reactive detection of changes to it’s value. Read more about Vue’s reactivity limitations.