Issue with show details on bootstrap-vue table

3
votes

Has anyone come across this error please and any idea how to fix it

I am pulling data from a backend through nuxt and vuex modules and returning to a table in my component.

This all works fine until i try and toggle details in my bootstrap-vue table when i get [vuex] Do not mutate vuex store state outside mutation handlers. Even when i have nothing in the hidden details

Has anyone had this issue and if so how do i fix it please

Many Thanks

3
vuejs2bootstrap-vue
Do you have any sample code? – James A Mohler

3 Answers

2
votes

Yes, this happens because of how bootstrap-vue manages an array of objects fed into it to create a table.

When you define a b-table component and provide a list of items via the :items property the component takes the array and performs transformations on it, adding functions and properties. This process doesn't seem to trigger the Vuex constraint against mutation outside of mutation functions.

However, when you call one of the added functions, in this case the row.toggleDetails function then the Vuex store becomes aware of the mutations and throws the error.

There are potentially two ways to fix the problem.

First, if you are operating from a simple Vuex store you can add this line of code to the store (as shown in this issue: https://github.com/nuxt/nuxt.js/issues/1917#issuecomment-338471402):

export const strict = false

This will take away the constraint against mutation. This is probably only appropriate for simple applications.

The best option is to use a map function on your computed property. 

computed: {
    myTableArr() {
         this.$store.getters['myTableArr'].map(mta => mta);
    }
}

With this safeguard in place, you are returning a new array and not a reference to your Vuex array. The bootstrap-vue b-table component can now modify it and you can make use of those modification in your code without consequence of a Vuex error.

I also typically use a constructor in my map function so it is:

.map(mta => new modelConstructor(mta))
1
votes

Its a little hacky to do what I did to get around this issue but I defined a _showDetails property on my object being shown in the b-table where the set calls a mutation and the warnings went away; no need to globally turn off Vuex's warnings.

class myObject {
    constructor() {
        ...
        this.__showDetails = false
    }
    ...
    get _showDetails () { return this.__showDetails }
    set _showDetails (value) {
        store.commit('toggleRowDetailsvisibility', {ref: this, val: value})
    }
}

and then in my data store I defined the following mutation:

toggleRowDetailsvisibility(state, parameters){
    parameters.ref.__showDetails = parameters.val
}

please notice the single _ and double __ in the code above...

0
votes

I have had the same problem. However, I was able to fix it by using the vuex-map-fields package. This enables two-way data binding to Vuex. This means the bootstrap-vue table can mutate the underlying data without throwing a Vuex error.

Although I think the map function on computed property should work, it didn't.