问题描述
我试图仅包含所有相关代码。这适用于 Vue3 和 VueDraggableNext。我想更改列表的顺序,而不是在列表之间移动。
以下是模板和相关脚本:
<template>
<div class="childBox scripts">
<draggable
v-model="data.scriptList"
element="div"
class="dragArea"
item-key="id"
>
<template
#item="{item}"
element="div"
class="selectedItems"
item-key="id"
:ref="item.label"
>
<span>{{item.label}}</span>
<span class="remove" v-on:click="removeScript(item.id)"></span>
</template>
</draggable>
</div>
</template>
import {ref} from 'vue';
import VueDraggableNext from 'vue-draggable-next';
export default {
name: 'Scheduler',components: {
Draggable: VueDraggableNext
},setup() {
const data = ref({
scriptList: [
{"id": 3,"label": "Yadda"},{"id": 2,"label": "Badda"},{"id": 13,"label": "Bing" }
]
});
return {
data
};
},methods: {
removeScript: function(id) {
//code here,but irrelevant.
},
上面的代码除了:
<draggable modelvalue="" element="div" class="dragArea" item-key="id"></draggable>
如果我用 v-for 替换可拖动部分,它会呈现,但当然没有可拖动的动作:
<div v-for="item in data.scriptList"
:key="item.id"
class="selectedItems list-group-item"
:ref="item.label">
<span>{{ item.label }}</span>
<span class="remove" v-on:click="removeScript(item.id)"></span>
</div>
解决方法
这似乎是一个错字。您使用大写字母 D 导入组件,但在模板中使用小写字母 d。它们应该相同 - 在组件声明中将其称为可拖动。
您还需要将 VueDraggableNext 作为 'vue-draggable-next' 的一部分导入,因此名称需要用花括号括起来。
import { VueDraggableNext } from 'vue-draggable-next';
components: {
draggable: VueDraggableNext
},<draggable
v-model="data.scriptList"
element="div"
class="dragArea"
item-key="id"
>