在我的Model.vue组件中(在Nuxt.js和Vuetifyjs应用程序中)我有这段代码:
<v-checkbox v-model="selected"></v-model>
在这个组件的脚本部分,我有:
computed: {
selected: {
get() {
return this.$store.state.selected
},
set(value) {
this.$store.commit('UPDATE_SELECTED', value)
}
},
},
在商店里,我有这个:
mutations: {
UPDATE_SELECTED: (state, value) => {
state.selected.push(value)
}
}
并且此商店的状态包含所选条目,如下所示:
state: {
selected: []
}
AFAIK,我遵守了documentation,但当我点击v-checkbox
组件时,它不会检查/取消选中。怎么了?
出现此问题的原因是您使用数组来建模名为selected
的布尔状态属性。因此,根据您的代码,在突变方面,在每个突变上,您在名为selected
的数组的最新位置推送一个新的布尔值。
此外,在get侧,计算属性的get()
函数将整个数组作为要显示的属性返回,从而导致客户端的未选中复选框。
因此,假设您需要处理多个复选框,为了使当前的复选框正常工作,您可以按如下方式编写它:
Vuex商店
let store = new Vuex.Store({
state: {
selected: []
},
mutations: {
UPDATE_SELECTED: (state, value) => {
//mutating the 0th array position of the selected property
state.selected[0] = value
}
}
})
计算财产
computed: {
selected: {
get() {
//getting the 0-index element of the array, assuming this checkbox is the 0th
return this.$store.state.selected[0]
},
set(value) {
this.$store.commit('UPDATE_SELECTED', value)
}
}
}
在这里你找到一个working fiddle。
或者,如果您只需处理应用程序状态中的单个复选框,则将state.selected
属性建模为布尔值就足够了。我的意思是,修改你的Vuex状态就足够了,如下所示:
state: {
selected: true //or false if you expect unchecked checkbox as default
}