Vuex nested loop, how to handle v-model on select/option
在我的应用程序中,我需要使用嵌套的v-for来显示带有select-option的元素列表。
1 2 3 4 5 6 7 | <p> Pick an option for this box: </p> <select v-model="box"> <option v-for="package in packages" :value="package.id">{{ package.name }} </option> </select> |
可变项来自Vuex商店。这样,我得到错误:
You are binding v-model directly to a v-for iteration alias. This will
not be able to modify the v-for source array because writing to the
alias is like modifying a function local variable. Consider using an
array of objects and use v-model on an object property instead.
考虑到这一点,我将像这样更改代码:
1 2 3 4 5 6 7 | <p><center>[wp_ad_camp_2]</center></p><p> Pick an option for this box: </p> <select v-model="box.id"> <option v-for="package in packages" :value="package.id">{{ package.name }} </option> </select> |
我刚刚将别名框中的选择
这样,所有作品...或...一半作品。因为,如果我要从选择中选择一个选项,则会出现另一个错误:
[vuex] Do not mutate vuex store state outside mutation handlers.
这是正确的,因为
现在,在一个简单的场景中,我将为set / get创建一个计算属性,以避免vuex商店发生突变。
但是...在这里,我有一个嵌套循环,所以我不能在'box.id'上创建一个计算式。
您对此有解决方案吗?
非常感谢!
您可以尝试使用其他数据流模式。
您选择的内容会监听商店(但不会直接更新)
1 2 3 4 5 6 7 8 | <p> Pick an option for this box: </p> <select :value="box.id" @change="updateBox"> <option v-for="package in packages" :value="package.id"> {{ package.name }} </option> </select> |
然后您创建一个方法,该方法在选定选项更改时将触发
1 2 3 4 | updateBox(e) { const id = e.target.value; this.$store.commit('changeYourBox', id); }, |
此函数应进行vuex更改,以更改框号。 因此,您也需要该突变。
存储值更新后,组件
这样,您可以从任何地方更改存储值,并且所选值也将更改。
在这种情况下使用矿山库vuex-dot可以做到:
让我们去这样的状态
1 2 3 4 5 6 7 8 9 10 | { state: { boxes: [] }, mutations: { editBox(state, {target, key, value}) { Vue.set(target, key, value); } } }; |
因此,让我们创建其他组件BoxEdit:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <template> <p> Pick an option for this box: </p> <select v-model="id"> <option v-for="package in packages" :value="package.id">{{ package.name }} </option> </select> </template> import { take } from 'vuex-dot' export default { props: ['box', 'packages'], computed: { ...take('box') .expose(['id']) .commit('editBox', true) .map() } } |
现在你可以简单地写
1 | <box-edit v-for="box in boxes" :box="box" :packages="packages"></box-edit> |
在您的主题组件模板中。
链接到图书馆网站:https://github.com/yarsky-tgz/vuex-dot