我一直在绞尽脑汁想这个问题,但我不太清楚该怎么做。
如何将输入数据绑定(bind)到存储对象属性? 意思是:我的组件只知道存储对象,但它事先并不知道该对象包含哪些属性。
举个例子:
Vue.component('os-choice', {
template: `
<div>
<h5>Select OS</h5>
<div>
<label class="checkbox">
<input type="checkbox" value="linux" v-model="linux">
Linux
</label>
</div>
<div>
<label class="checkbox">
<input type="checkbox" value="macos" v-model="macos">
MacOS
</label>
</div>
<div>
<label class="checkbox">
<input type="checkbox" value="windows" v-model="windows">
Windows
</label>
</div>
</div>
`,
computed: {
linux: {
get() {
return store.state.linux;
},
set(val) {
store.commit('updateLinux', {
linux: val
});
}
},
macos: {
get() {
return store.state.macos;
},
set(val) {
store.commit('updateMacos', {
macos: val
});
}
},
windows: {
get() {
return store.state.windows;
},
set(val) {
store.commit('updateWindows', {
windows: val
});
}
},
}
});
Vue.component('os-choice2', {
template: `
<div>
<h5>Select OS</h5>
<div v-for="(value,index) in os" :key="index">
<label class="checkbox">
<input type="checkbox" value="index" v-model="value">
{{index}}
</label>
</div>
</div>
</div>
`,
computed: {
os: {
get(){ return store.state.os; },
set(event){
var name = event.target.value;
var value = event.target.checked;
store.commit('updateOs', {name: name, value: value});
}
},
}
});
const store = new Vuex.Store({
state: {
// initial state
linux: true,
macos: true,
windows: false,
os: {
linux: true,
macos: true,
windows: false,
}
},
mutations: {
updateLinux(state, payload) {
console.log('STORE: updated linux');
state.linux = payload.linux;
},
updateMacos(state, payload) {
console.log('STORE: updated MacOS');
state.macos = payload.macos;
},
updateWindows(state, payload) {
console.log('STORE: updated Windows');
state.windows = payload.windows;
},
updateOs(state, payload) {
console.log('STORE: updated OS');
state.os[payload.name] = payload.value;
}
}
});
var app = new Vue({
el: "#app",
})
.row{
width: 100%;
}
.column{
width: 50%;
}
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vuex@3.1.1/dist/vuex.js"></script>
<div id="app" style="text-align:center;">
<div class="row">
<div class="column">
<os-choice></os-choice>
</div>
<div class="column">
<os-choice2></os-choice2>
<div>
</div>
</div>
第一个组件效果很好。 第二个组件不更新存储:它生成错误“[vuex] 不要在突变处理程序之外改变 vuex 存储状态。”
我相信我理解它发生的原因:由于组件的计算属性指向对象(而不是被更改的属性),v-model 将尝试更改 deep 属性,从而强制更改商店这会在组件调用对象的 set() 方法之前抛出错误,对吧?
那么我想知道的是如何才是正确的处理方式?
我的真实场景是我正在构建一个带有复选框的动态过滤器,并且在运行时我不知道它会有多少选项。这意味着我将循环通过我的选项来创建复选框,但是数据绑定(bind)必须采用“值[]”的形式。这就是我头疼的地方。
先谢谢大家
最佳答案
来自 VueJs 文档:
Custom events can also be used to create custom inputs that work with v-model. Remember that:
<input v-model="searchText">
does the same thing as:
<input v-bind:value="searchText" v-on:input="searchText =
$event.target.value"
>
When used on a component, v-model instead does this:
<custom-input v-bind:value="searchText" v-on:input="searchText =
$event"
></custom-input>
因此,除了使用 v-model
,您还可以使用 value
作为 v-bind:value="value"
和 map适当更新商店的事件,例如:v-on:input="store.commit('store.commit('updateOs', event.target.value)"
另一个组件可以工作,因为您完全按照 Vuex 推荐的方式进行操作:https://vuex.vuejs.org/guide/forms.html
但是在 v-for
上,您直接使用商店模型。
关于javascript - 如何将商店中对象的动态属性用作 v 模型?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56351796/