Vue Draggable Next missing template or render function
Question
I'm trying to use Vue Draggable Next for a Vue 3 example page.
I've followed guide in the repo . After failing to import Vue Draggable Next component, I've started using https://unpkg.com/vue-draggable-next@2.1.1/dist/vue-draggable-next.global.js instead of https://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/4.0.0/vuedraggable.umd.min.js .
My HTML code is shown in this 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>
Provide error: "[Vue warn]: Component is missing template or render function." and doesn't show the draggable list.
1 answers
solution1
3 2022-03-19 16:42:19
I finally found the solution to the problem!
You need to replace this line
app.component("draggable", VueDraggableNext);
with this line
app.component("draggable", VueDraggableNext["VueDraggableNext"]);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.