I'm coordinating input elements with the keys of an object on Vuex state. Let's say I've got this object:

myObj: { foo: 1, bar: 2 }

And a puted property in a ponent:

myObjVals: {
  get(){ return this.$store.state.myObj },
  set(//?) { //? },
},

In the template, I can get values from the store:

<input type="number" v-model="myObjVals['foo']"/>  // displays "1"
<input type="number" v-model="myObjVals['bar']"/>  // displays "2"

But when I adjust the value on an input, I get the error: "Do not mutate vuex store state outside mutation handlers."

One obvious solution here is to have a different puted property for each key in myObj... but for larger objects, this gets repetitious/cumbersome. I am wondering if there is any way to code this as I am attempting to above, that is, using only one puted property to reference the object for both get and set functions in v-model.

I'm coordinating input elements with the keys of an object on Vuex state. Let's say I've got this object:

myObj: { foo: 1, bar: 2 }

And a puted property in a ponent:

myObjVals: {
  get(){ return this.$store.state.myObj },
  set(//?) { //? },
},

In the template, I can get values from the store:

<input type="number" v-model="myObjVals['foo']"/>  // displays "1"
<input type="number" v-model="myObjVals['bar']"/>  // displays "2"

But when I adjust the value on an input, I get the error: "Do not mutate vuex store state outside mutation handlers."

One obvious solution here is to have a different puted property for each key in myObj... but for larger objects, this gets repetitious/cumbersome. I am wondering if there is any way to code this as I am attempting to above, that is, using only one puted property to reference the object for both get and set functions in v-model.

• javascript
• vue.js

Share Follow asked Jun 22, 2018 at 20:18 drenldrenl 1,35344 gold badges1919 silver badges3232 bronze badges 6

• 1 I don't think that this is possible, because VueJS has no way of knowing that it should use the setter of the object instead of directly altering the object it has gotten from the state. One way could be to use the mapState of Vuex to help generate the needed getters (vuex.vuejs/guide/state.html#the-mapstate-helper). Edit: of course you could also use the non-strict mode of vuex – puelo Commented Jun 22, 2018 at 22:01
• Aha - this is a sort of pass-by-reference error, isn't is? – drenl Commented Jun 22, 2018 at 22:28
• Will check out mapState, thanks. – drenl Commented Jun 22, 2018 at 22:28
• 1 Yeah. You are getting the whole object and by accessing the different properties inside your model you are altering the object without using the setter. At least i believe that this is the case. Have you tried using the setter and calling a Vuex mutation for the object from there? – puelo Commented Jun 22, 2018 at 22:31
• 1 That was were i am unsure of. Is the setter even called if you do the puted property on the whole object and then change property values inside the v-model. I would assume that the settter isn't even called. And i also believe that you cannot write a custom setter based on key. – puelo Commented Jun 23, 2018 at 16:36

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 6

Come to think of your problem once more. One solution could be something suggested here: https://vuex.vuejs/guide/forms.html

<input type="number" :value="myObjVals['foo']" @input="changeMyObj('foo', $event)"/>  // displays "1"
<input type="number" :value="myObjVals['bar']" @input="changeMyObj('bar', $event)"/>  // displays "2"

with puted property and a method:

puted: {
    myObjVals: function () {
        return this.$store.state.myObj
    }
},
methods: {
    changeMyObj(key, evt) {
        this.$store.mit('changeMyObj', {key: key, value: evt.data})
    }
}

With a mutation inside the store:

mutations: {
  changeMyObj(state, objInput) {
    state.myObj[objInput.key] = objInput.value
  }
}

Here is a "working" fiddle: http://jsfiddle/zfab6tzp/346/

Not sure if this is the best solution possible, but it seems to be working