关于vue.js:Vuex嵌套循环,如何在select / option上处理v-model

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>

我刚刚将别名框中的选择v-model更改为右边的id:box.id

这样,所有作品...或...一半作品。因为,如果我要从选择中选择一个选项,则会出现另一个错误:

[vuex] Do not mutate vuex store state outside mutation handlers.

这是正确的,因为v-model绑定到box.id(不是别名,而是真实值)。但是,当我选择一个选项时,v模型会"尝试"更改来自Vuex商店的box.id。

现在,在一个简单的场景中,我将为set / get创建一个计算属性,以避免vuex商店发生突变。

但是...在这里,我有一个嵌套循环,所以我不能在'box.id'上创建一个计算式。

您对此有解决方案吗?

非常感谢!