我将 vuedraggable 与 Vuex 存储一起使用,文档建议每个组件都应具有直接指向数组的 v-model 属性,因此可以通过 setter 更改 Vuex 存储。
问题是:我正在动态地将新数组添加到存储中,并在模板中使用 v-for 循环访问它们。在 v-for 中有标签,我使用方括号语法从列表中访问正确的数组。它会渲染数据,但在这种情况下,v-model 无法改变“listOfArrays [index]”下没有设置器的状态。
我试图通过直接分配动态数组来存储具有随机生成的名称的属性,并拥有一个包含属性名称列表的数组来解决它,但是改变它们的问题仍然存在。显然我对此有错误的想法。
我想要实现的是:有一种方法可以将新数组添加到 $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>