【发布时间】：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 - 我发表了评论。组件代码有问题。这就是我评论它的原因！你现在可以运行代码了。
标签： javascript vuejs3 vue.draggable