Dan*_*oni 0 html javascript vue.js vuedraggable vuejs3
我正在尝试将 Vue Draggable Next 用于 Vue 3 示例页面。
我已按照repo中的指南进行操作。导入 Vue Draggable Next 组件失败后，我开始使用https://unpkg.com/vue-draggable-next@2.1.1/dist/vue-draggable-next.global.js而不是https://cdnjs .cloudflare.com/ajax/libs/Vue.Draggable/4.0.0/vuedraggable.umd.min.js。
我的 HTML 代码显示在这个 JSFiddle 中：
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue@3"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>
<script src="https://unpkg.com/vue-draggable-next@2.1.1/dist/vue-draggable-next.global.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in bbcourses" :key="item.id">
<div style="border: 1px #000 solid">{{ item.name }}</div>
</li>
</ul>
<ul>
<li
v-for="item in pcourses"
:key="item.id"
style="border: 1px #000 solid"
>
{{ item.name }}
</li>
</ul>
<draggable
:list="pcourses"
group="people"
@start="log"
@end="log"
itemKey="id"
@change="log"
>
<div
v-for="element in list"
:key="element.name"
style="border: 1px #000 solid"
>
{{ element.name }}{{ element.id }}
</div>
</draggable>
</div>
<script>
const app = Vue.createApp({
data() {
return {
drag: false,
message: "Hello Vue!",
bbcourses: [
{ id: 1, name: "First course" },
{ id: 2, name: "Second course" },
],
pcourses: [
{ id: 1, name: "First course" },
{ id: 2, name: "Second course" },
],
};
},
methods: {
log(event) {
console.log(event);
},
},
});
app.component("draggable", VueDraggableNext);
app.mount("#app");
</script>
</body>
</html>提供错误："[Vue warn]: Component is missing template or render function."并且不显示可拖动列表。
小智 5
我终于找到了问题的解决方案！
你需要更换这一行
app.component("draggable", VueDraggableNext);
用这条线
app.component("draggable", VueDraggableNext["VueDraggableNext"]);