Vuex嵌套循环,如何在select/option上处理v-model

Question

在我的应用程序中,我需要使用嵌套的v-for来显示带有select-option的元素列表.这就是场景

<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商店.这样,我收到错误:

您将v-model直接绑定到v-for迭代别名.这将无法修改v-for源数组,因为写入别名就像修改函数局部变量一样.考虑使用对象数组并在对象属性上使用v-model.

考虑到这一点,我将改变代码:

<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>

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

通过这种方式,所有作品 ......或......一半都有效.因为,如果我要从选择中选择一个选项,我还有另一个错误:

[vuex]不要在变异处理程序之外改变vuex存储状态.

这是正确的,因为v-model它绑定到box.id(这不是别名而是实际值).但是,当我拿起一个选项的V模式"尝试"改变box.id是来自Vuex店.

现在,在一个简单的场景中,我将为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);
},

这个函数应该提交一个 vuex 突变来改变盒子 id。所以你也需要这种突变。一旦存储值更新，您的组件box对象就会更新，并且侦听该存储的选择将相应地更新其选择的值。

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