vue.js - Vuex 嵌套循环，如何处理选择/选项上的 v-model

Question

在我的应用程序中，我需要使用嵌套的 v-for 来显示带有选择选项的元素列表。这就是场景

<div class="stuck" v-for="box in items">
  <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>
</div>

变量项来自 Vuex store。这样，我得到了错误:

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.

考虑到这一点，我将像这样更改代码:

<div class="stuck" v-for="box in items">
  <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>
</div>

我刚刚将别名 box 中的 select v-model 更改为正确的 id:box.id

以这种方式，所有的工作......或者......一半的工作。因为，如果我要从选择中选择一个选项，我会遇到另一个错误:

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

这是正确的，因为 v-model 绑定(bind)到 box.id(这不是别名，而是真实值)。 但是，当我选择一个选项时，v-model“尝试”更改来自 Vuex store 的 box.id。

现在，在一个简单的场景中，我将为 set/get 创建一个计算属性以避免 vuex 存储突变。

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

你有解决办法吗？

非常感谢!

Answer 1

您可以尝试不同的数据流模式。 您的选择监听商店(但不直接更新它)

<div class="stuck" v-for="box in items">
  <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>
</div>

然后您创建一个方法，只要选定的选项发生变化就会触发

updateBox(e) {
  const id = e.target.value;
  this.$store.commit('changeYourBox', id);
},

这个函数应该提交一个改变盒子 ID 的 vuex 突变。所以你也需要那个突变。 一旦存储值更新，您的组件 box 对象就会更新，监听该存储的 select 将相应地更新它的选定值。

这样，您可以从任何地方更改存储值，所选值也会随之更改。