Question

我正在将vuedraggable与Vuex存储一起使用，documentation建议每个组件都应具有直接指向数组的v-model属性，以便可以通过setter来更改Vuex存储。

问题是：我正在向商店动态添加新数组，并使用模板中的v-for循环访问它们。将标签放在v-for中，我使用方括号语法从列表中访问正确的数组。可以获取呈现的数据，但是在这种情况下，v模型无法更改在“ listOfArrays [index]”下没有setter的状态。

我试图通过直接分配动态数组来存储具有随机生成的名称的属性，并拥有一个包含属性名称列表的数组来解决此问题，但是对它们进行突变的问题仍然存在。显然我对此有错误的想法。

我想要实现的是：有一种方法可以将新数组添加到$ store中，然后使用组件状态提交突变。我希望指出正确的方向，或者也许是替代解决方案。

<template>
 <div v-for="(array, index) in listOfArrays">
  <draggable v-model="listOfArrays[index]"> ..data... </draggable>
 </div>
</template>

<script lang="ts">
 get listOfArrays() {
  return this.$store.getters.listOfArrays;
 }

 set listOfArrays(value) {
  this.$store.commit('updateListOfArrays', value);
 }
</script>

在v-for循环中通过v-model突变Vuex存储

0 个答案: