[Vuejs]-Computed property "dialog" was assigned to but it has no setter

by

2👍

✅

You need to use the Vuex mutation to update the state.

https://vuex.vuejs.org/guide/mutations.html

In your example,

Your click event should be handled in the methods @click="handleClick"

methods: {
  handleClick() {
    this.$store.commit('openDialog')
}

In your store.js

mutations: {
  openDialog(state) {
    state.dialog = true
  }
}
👤Ru Chern Chong

1👍

mapState will only create getters. You should define a mutation in your vuex store, which will be able to change the state.

Just add this to your store:

...
mutations: {
 SET_DIALOG_FLAG_FALSE (state) {
   state.dialog = false;
},
//optional if you do not want to call the mutation directly
//must important different is, that a mutation have to be synchronous while
//a action can be asynchronous
actions: {
 setDialogFalse (context) {
  context.commit('SET_DIALOG_FLAG_FALSE');
 }
}

If you want to work with mapMutations/mapAction in your component:

import { mapMutation, mapActions } from vuex;
...
//they are methods and not computed properties
methods: {
 ...mapMutations([
  'SET_DIALOG_FLAG_FALSE'
 ]),
 ...mapActions([
  'setDialogFalse'
 ])
}

Now in your v-btn you can call the action or mutation.

<v-btn
  color="primary"
  flat
  @click="this.setDialogFalse"> I accept </v-btn>
👤Jns

Leave a comment