Vue3与Vue.draggable-next拖拽问题
Posted
技术标签:
【中文标题】Vue3与Vue.draggable-next拖拽问题【英文标题】：Vue3 with Vue.draggable-next drag and drop problem 【发布时间】：2022-01-01 00:53:42 【问题描述】：我正在尝试从我的项目的 Vue2 迁移到 Vue3。这是一个带有 Vue 和拖放表的简单 html 项目。它在 vue2 中运行良好，但在 vue3 中不行。在控制台中出现此错误：“vue@next:8001 [Vue 警告]：无法解析组件：可拖动 如果这是本机自定义元素，请确保通过 compilerOptions.isCustomElement 将其从组件解析中排除。在“
<!DOCTYPE html>
<html lang="en" >
<meta charset="utf-8"/>
<head>
<script type="text/javascript" src="https://unpkg.com/vue@next"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue-draggable-next@2.1.1/dist/vue-draggable-next.global.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
</head>
<body>
<div id='myMain'>
<h2> title </h2>
title2
<br><br>
<table>
<draggable :list="schoolInfo" >
<template v-for='(school, index) in schoolInfo' >
<tr>
<td>
<input v-model="school['name']">
</td>
<td>
<input v-model="school['address']" >
</td>
<td>
<input v-model="school['city']">
</td>
<td>
<input v-model="school['phone']" >
</td>
</tr>
</template>
</draggable>
</table>
</div>
<script>
const schoolData = Vue.createApp(
data()
return
title:"this is my school",
title2:'title2 here it iss',
schoolInfo: [
id: 0,
name:"school1",
address:"address1",
city:"city1",
phone:"phone1"
,
id: 1,
name:"school2",
address:"address2",
city:"city2",
phone:"phone2"
,
id: 3,
name:"school3",
address:"address3",
city:"city3",
phone:"phone3"
,
id: 4,
name:"school4",
address:"address4",
city:"city4",
phone:"phone4"
],
)
schoolData.component('draggable',VueDraggableNext)
schoolData.mount('#myMain')
</script>
</body>
</html>【问题讨论】：
为什么组件被注释掉了？这可以解释错误，因为您没有在全局范围内注册draggable。
@Thomas - 我发表了评论。组件代码有问题。这就是我评论它的原因！你现在可以运行代码了。
【参考方案1】：
删除：
components:
draggable: VueDraggableNext,
,
添加：
schoolData.component('draggable',VueDraggableNext);
schoolData.mount('#myMain')之前
这应该会解析组件。
【讨论】：
saibbyweb，感谢您的回复。我试过了。现在错误说组件丢失:( 组件已正确注册，它与库本身有关。您可以确认的是，尝试并以相同的方式注册其他一些 Vue 3 兼容库，看看它是否有效。如果是这样，那么您应该通过打开一个问题与 github 上此库的作者联系。以上是关于Vue3与Vue.draggable-next拖拽问题的主要内容，如果未能解决你的问题，请参考以下文章
vue3-directives 自定义指令 做个聊天窗口拖拽和拖拽按钮
vue3-directives 自定义指令 做个聊天窗口拖拽和拖拽按钮
vue3-directives 自定义指令 做个聊天窗口拖拽和拖拽按钮