Vuex - Computed property name was assigned to but it has no setter

Question

I have a component with some form validation  It is a multi step checkout form  The code below is for the first step  I d like to validate that the user entered some text  store their name in the global state and then send then to the next step  I am using vee-validate and vuex   lt template gt   lt div gt       lt div class  field  gt           lt label class  label  for  name  gt Name lt  label gt           lt div class  control has-icons-right  gt                lt input name  name  v-model  name  v-validate   required alpha    class    input   true   is-danger   errors has  name      type  text  placeholder  First and Last  gt               lt span class  icon is-small is-right  v-if  errors has  name    gt                   lt i class  fa fa-warning  gt  lt  i gt               lt  span gt           lt  div gt           lt p class  help is-danger  v-show  errors has  name    gt    errors first  name      lt  p gt        lt  div gt       lt div class  field pull-right  gt           lt button class  button is-medium is-primary  type  submit   click prevent  nextStep  gt Next Step lt  button gt       lt  div gt   lt  div gt   lt  template gt    lt script gt  export default       methods            nextStep                var self   this                  from baianat vee-validate             this  validator validateAll   then  result    gt                    if  result                        this  store dispatch  addContactInfoForOrder   self                       this  store dispatch  goToNextStep                        return                                                         computed            name  function                return this  store state name                     lt  script gt    I have a store for handling order state and recording the name  Ultimately I would like to send all of the info from multi step form to the server   export default     state        name              mutations        UPDATE ORDER CONTACT state  payload         state name   payload name                 actions        addContactInfoForOrder  commit   payload          commit  UPDATE ORDER CONTACT   payload                 When I run this code I get an error that Computed property  name  was assigned to but it has no setter   How do I bind the value from the name field to the global state  I would like this to be persistent so that even if a user goes back a step  after clicking  Next Step   they will see the name they entered on this step

User · Answer

It should be like this   In your Component  computed               mapGetters                   nameFromStore   name                          name               get                 return this nameFromStore                          set newName                return newName                                 In your store  export const store   new Vuex Store            state                name    Stackoverflow                       getters                     name   state    gt                         return state name

User · Answer

I was facing exact same error  Computed property  quot callRingtatus quot  was assigned to but it has no setter  here is a sample code according to my scenario computed     callRingtatus                return this  store getters  chat callState     2             I change the above code into the following way computed     callRingtatus           return this  store state chat callState   2            fetch values from vuex store state instead of getters inside the computed hook

User · Answer

For me it was changing   this name   response data    To what computed returns so   this  store state name   response data

User · Answer

If you re going to v-model a computed  it needs a setter  Whatever you want it to do with the updated value  probably write it to the  store  considering that s what your getter pulls it from  you do in the setter   If writing it back to the store happens via form submission  you don t want to v-model  you just want to set  value   If you want to have an intermediate state  where it s saved somewhere but doesn t overwrite the source in the  store until form submission  you ll need to create such a data item

[vue.js] Vuex - Computed property "name" was assigned to but it has no setter

Examples related to vue.js

Examples related to vuejs2

Examples related to vue-component

Examples related to vuex