在我的项目中,我将vuedraggable模块用于拖放和vuex-persistedstate模块。 它有4个带有卡片的列,卡片可以在列之间拖动。 当我添加或删除卡时,它们已从vuex存储以及从localStorage添加/删除。 但是,当我在列之间移动卡时,它们只会在UI上发生变化-不会更改vuex和localStorage。 我做错了什么?
我创建了一个笑话测试,它通过了。 但是,当我尝试使用vuedraggable文档中的:move props更改状态时,出现了错误 Uncaught TypeError:传播非可迭代实例的无效尝试
<template lang="pug">
.cards
Draggable(:list="card" class="drag-area" :group="{name: 'card'}"
:move="checkMove")
.cards__wrapper(v-for="(item,i) in card" :key="i")
.cards__wrapper_remove(@click="closeCard(i, index)")
span.cards__wrapper_id id: {{ item.id }}
span.cards__wrapper_content {{ item.content }}
</template>
<script>
import Draggable from "vuedraggable";
import { mapActions, mapGetters } from "vuex";
export default {
methods: {
...mapActions(["removeCard", "removeDraggableCard"]),
closeCard(innerIndex, index) {
this.removeCard({ index, innerIndex });
},
checkMove() {
let updatedHold = this.hold;
let updatedProgress = this.progress;
let updatedReview = this.review;
let updatedApproved = this.approved;
this.removeDraggableCard({updatedHold,
updatedProgress,
updatedReview,
updatedApproved});
}
},
computed: {
...mapGetters({
hold: "getHold",
progress: "getProgress",
review: "getReview",
approved: "getApproved"
}),
cardsArray() {
let resultArr;
switch (this.index) {
case 1:
resultArr = this.hold;
break;
case 2:
resultArr = this.progress;
break;
case 3:
resultArr = this.review;
break;
case 4:
resultArr = this.approved;
break;
}
return resultArr;
}
},
components: {
Draggable
},
props: {
index: {
type: Number,
required: true,
default: 0
},
card: {
type: Array,
default: function() {
return [];
}
}
}
};
</script>
我期望什么? 当卡从一列移动到另一列时,存储中的阵列将更新,localStorage也将更新。