我正在协调输入元素与 Vuex 状态下对象的键。假设我有这个对象:
myObj: { foo: 1, bar: 2 }
以及组件中的计算属性:
myObjVals: {
get(){ return this.$store.state.myObj },
set(//?) { //? },
},
在模板中,我可以从商店获取值:
<input type="number" v-model="myObjVals['foo']"/> // displays "1"
<input type="number" v-model="myObjVals['bar']"/> // displays "2"
但是当我调整输入的值时,出现错误:“不要在突变处理程序之外改变 vuex 存储状态。”
这里一个明显的解决方案是为 myObj
中的每个 键设置不同的计算属性...但是对于较大的对象,这会变得重复/麻烦。我想知道是否有任何方法可以像我在上面尝试的那样对此进行编码,也就是说,仅使用一个计算属性来引用 get
和 set
函数的对象在 v-model
中。
最佳答案
再想想你的问题。一种解决方案可能是此处建议的:https://vuex.vuejs.org/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"
具有计算属性和方法:
computed: {
myObjVals: function () {
return this.$store.state.myObj
}
},
methods: {
changeMyObj(key, evt) {
this.$store.commit('changeMyObj', {key: key, value: evt.data})
}
}
在 store 中有一个突变:
mutations: {
changeMyObj(state, objInput) {
state.myObj[objInput.key] = objInput.value
}
}
这是一个“工作” fiddle :http://jsfiddle.net/zfab6tzp/346/
不确定这是否是最佳解决方案,但它似乎可行
关于javascript - 使用 vuex v-model 指定对象值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50995066/