在 Vue 3 中可拖动不会显示值

Question

我使用Vue draggable通过拖放对Store.js中的项目进行排序(我在这里简化了示例，仅使用['a', 'b', 'c']作为存储数据(。

我还使用了一个可从setup()访问的计算属性

<draggable v-model="myList" item-key="id" @start="drag=true" @end="drag=false" >
<template #item="{card}">
<p>{{ card }}</p>
</template>
</draggable>

import draggable from 'vuedraggable';
export default {
name: "Dashboard",
components: {
draggable
},
setup() {
const cards = computed(() => {
return ['a', 'b', 'c']
})
return {
cards
}
}
}

我知道模板在cards中迭代，但没有显示任何值，或者也不可访问。

Answer 1

在Vue 3中-执行setup时，组件实例尚未创建。因此，您将无法访问data、computed和methods组件选项。

参考：https://v3.vuejs.org/guide/composition-api-setup.html#accessing-组件属性

同样在可拖动组件中，element变量将访问数组项。

更新的模板代码：

<draggable v-model="myList" item-key="id" @start="drag=true" @end="drag=false" >
<template #item="{element}">
<p>{{ element.value }}</p>
</template>
</draggable>

尝试更改组件代码如下，

import draggable from 'vuedraggable';
export default {
name: "Dashboard",
components: {
draggable
},
data:function(){
return {
drag:false
}
},
computed:{
myList:function(){
return [{id:1,value:'Card A'},{id:2, value:'Card B'}];
}
}
}

Answer 2

纱线添加vue draggable next

<draggable class="w-full mt-5 dragArea list-group" :list="list" @change="log">
<div
class="max-w-md p-2 mb-5 border cursor-pointer list-styles"
v-for="element in list"
:key="element.name"
>
{{ element.name }}
</div>
</draggable>
</template>
<script>
import { defineComponent } from "vue";
import { VueDraggableNext } from "vue-draggable-next";
export default defineComponent({
components: {
draggable: VueDraggableNext,
},
data() {
return {
enabled: true,
list: [
{ name: "Medical science", id: 1 },
{ name: "Allied Medicine", id: 2 },
{ name: "Defense Service", id: 3 },
{ name: "Education training", id: 4 },
{ name: "Economics & Commerce", id: 5 },
{ name: "Banking & Finance", id: 6 },
{ name: "Enginnering", id: 7 },
{ name: "science", id: 8 },
],
dragging: false,
};
},
methods: {
log(event) {
console.log(event);
},
},
});
</script>