How do I fix "Computed property ... was assigned to but it has no setter" error in Buefy b-table component using Vuex store

Question

Situation:

I have a VueJS2 app with an array of items in my Vuex store:

export default new Vuex.Store({
    state: {
       checkedItems: []
    }
   ...

The idea is to have the checked (selected) items in a buefy b-table component globally available through this array. The b-table is initiated in my component like so:

 <b-table
   ...
   :checked-rows.sync="checkedItems"
   ...

and the store's state is mapped within the component like so:

...
  computed: {
     ...mapState(['checkedItems'])
   },
  ...

Problem:

The rows get selected visually (i.e. the checkbox toggles between checked/ clear) but the checkedItems array of the store does not get updated. I know this because for debugging I display a count for the array and it remains zero no matter how many items I (de-)select. The browser console shows "[Vue warn]: Computed property "checkedFrqs" was assigned to but it has no setter." when I select a row.

I notice however it works when I manually push an entry in one of the components methods viz:

this.checkedItems.push(row)

Question:

How do I get

:checked-rows.sync="checkedItems"

to work seamlessly for the Vuex array? (P.S. when I use a local array instead of the Vuex store's array, everything also works)

I think that error happens when you try to change a computed property — Juanín, Jun 16 '20 at 19:43
By the way, take a look at this https://vuex.vuejs.org/guide/mutations.html. Vuex variables have to be updated using mutations. — Juanín, Jun 16 '20 at 19:45

score 1 · Answer 1 · answered Jun 16 '20 at 20:19

1

Silly me, this solved it:

:checked-rows.sync="$store.state.checkedItems"

(not using the getters->mapState)

answered Jun 16 '20 at 20:19

user1729972

712
2
9
29

How do I fix "Computed property ... was assigned to but it has no setter" error in Buefy b-table component using Vuex store

1 Answers1