b-table detail row: opening & closing throws a vuex state warning

Describe the bug

I’m using b-table with the detail row support. So I’ve added a button to trigger toggleDetail. It works, for opening & closing the detail row. But when clicked, in both cases, opended and closed, the javascript console tell me this

vue.common.dev.js?4650:630 [Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] do not mutate vuex store state outside mutation handlers."

(found in <Root>)
warn @ vue.common.dev.js?4650:630
logError @ vue.common.dev.js?4650:1889
globalHandleError @ vue.common.dev.js?4650:1884
handleError @ vue.common.dev.js?4650:1844
run @ vue.common.dev.js?4650:4565
update @ vue.common.dev.js?4650:4537
notify @ vue.common.dev.js?4650:741
reactiveSetter @ vue.common.dev.js?4650:1066
set @ vue.common.dev.js?4650:1087
eval @ mixin-tbody-row.js?c324:84
invokeWithErrorHandling @ vue.common.dev.js?4650:1859
invoker @ vue.common.dev.js?4650:2180
original._wrapper @ vue.common.dev.js?4650:7543
vue.common.dev.js?4650:1893 Error: [vuex] do not mutate vuex store state outside mutation handlers.
    at assert (vuex.esm.js?2f62:90)
    at Vue.store._vm.$watch.deep (vuex.esm.js?2f62:793)
    at Watcher.run (vue.common.dev.js?4650:4563)
    at Watcher.update (vue.common.dev.js?4650:4537)
    at Dep.notify (vue.common.dev.js?4650:741)
    at Object.reactiveSetter [as _showDetails] (vue.common.dev.js?4650:1066)
    at VueComponent.set [as $set] (vue.common.dev.js?4650:1087)
    at eval (mixin-tbody-row.js?c324:84)
    at invokeWithErrorHandling (vue.common.dev.js?4650:1859)
    at HTMLButtonElement.invoker (vue.common.dev.js?4650:2180)

Steps to reproduce the bug

in a b-table add some columns and an action column, like the following

                        <template
                            v-slot:cell(actions)="data"
                            no-sort-reset="true"
                        >
                            <b-button size="sm" @click="data.toggleDetails" class="mr-2">
                                {{ data.detailsShowing ? 'Hide' : 'Show'}} Details
                            </b-button>
                        </template>

Then add a (eventually empty) detail row

                       <template v-slot:row-details="data">
                            <b-card>
                               some data here
                            </b-card>
                        </template>

Then you can click on the button to show/hide details

Expected behavior

I expect to do not see warning in js console

Versions

Libraries:

• bootstrap-vue: 211.0
• Bootstrap: 4.4.4
• Vue: 2.6.11

Environment:

• Device: indipendent, but Desktop Pc
• OS: indipendente, but Windows 10
• Browser: Chrom
• Version: 80]

[realtebo]

Now I understand my issue … so I will close this issue because is NOT related to your package

I was retrying data as a complex object, and so I must not map the feteched objected directly, but the .data property of it.

For precision, for future googlers, I was fecthing paginated data from a Laravel Api.

I added a computed property

       recordData() {
            if (!this.records) return [];
            if (!this.records.data) return [];
            return this.records.data.map(item => ({ ...item }));
        },

and then I am using now this computed prop as source for the table

:items="recordData"

A lot of thanks for your help and patience

[tmorehouse]

You may need to do a medium-shallow clone of the data before passing it to <b-table>:

const items = vueGetter.map(item => ({ ...item })

Unless you set up your Vuex getter to handle a setter as well