我说过10个物体组成一个数组
它们使用v-for进行迭代,以显示标签A:Inputbox,文本属性绑定为v-model.
这是它的小提琴链接.
我说过10个物体组成一个数组
它们使用v-for进行迭代,以显示标签A:Inputbox,文本属性绑定为v-model.
这是它的小提琴链接.
我们假设您希望同时使用v-model的双向绑定和Vuex存储.
您的问题是希望Vuexstore 处于严格模式
const store = new Vuex.Store({
// ...
strict: true
})
所以你所有的变异都应该经过Vuexstore ,你可以在Vue中看到.js开发工具.
方法1:我们可以通过使用克隆对象和watcher提交Mutations 来避免Vuex错误.
const store = new Vuex.Store({
strict: true,
state: {
formdata: [{
label: 'A',
text: 'some text'
},{
label: 'B',
text: 'some other text'
},{
label: 'C',
text: ' this is a text'
}]
},
mutations: {
updateForm: function (state, form) {
var index = state.formdata.findIndex(d=> d.label === form.label);
Object.assign(state.formdata[index], form);
}
}
});
new Vue({
el: '#app',
store: store,
data () {
return {
//deep clone object
formdata: JSON.parse(JSON.stringify(this.$store.state.formdata))
};
},
computed: {
formdata() {
return this.$store.state.formdata
}
},
watch: {
formdata: function(form)
this.$store.commit('updateForm', form);
}
}
})
方法2:你可以使用computed get/set来根据vuex doc个密码提交你的Mutations
computed: {
message: {
get () {
return this.$store.state.obj.message
},
set (value) {
this.$store.commit('updateMessage', value)
}
}
}