有没有办法在 Vuex 商店中使用带有计算变量的 Vue.Draggable 列表?我对 VueJS 相当陌生,这是我当前的组件设置:
// Template
<draggable class="list-group" :list="list1" group="people">
<div
class="list-group-item"
v-for="(element, index) in list1"
:key="element.id"
>{{ element.name }} ({{ element.list }}) ({{ index }})</div>
</draggable>
// Script
computed: {
list1: {
return this.$store.getters.listItems.filter(item => item.list === 1)
}
}
// Store
const getters = {
listItems: (state) => {
return state.items
}
}
没有计算变量,一切正常。使用计算变量时,我可以在列表之间拖动列表项,但是 UI 不会更新,因为它是从商店计算的。基本上,我需要的是根据输入文件(json)显示多个列表。这些列表具有可以在不同列表之间拖动的列表项(使用 Vue.Draggable)。此外,用户可以创建新的列表项/删除现有的列表项。实现这一目标的最佳方法是什么?
先感谢您。