Vue3使用vue-draggable-next实现拖拽表格时draggable组件无法解析怎么办

问题原因 #

• 第一个问题是HTML原生table的解析限制：原生<table>标签的直属子元素仅能是<thead>、<tbody>、<tr>这类表格专属元素，你直接把<draggable>放在<table>下，浏览器会自动把<draggable>节点移到<table>外部，导致Vue找不到注册的组件、抛出解析失败的警告。
• 第二个问题是v-for未绑定唯一key属性，Vue3对v-for的key要求为强制项，缺失也可能引发渲染异常。
• 额外冗余项：你单独引入的Sortablejs可以删掉，vue-draggable-next已经内置了对应依赖，不需要额外引入。

修复方案 #

修改模板部分的表格结构，给draggable组件添加tag="tbody"属性，让它渲染为原生tbody元素，符合table的DOM结构规范；同时给v-for绑定key为每条数据的id。
修复后的完整可运行代码如下：

<!DOCTYPE html>
<html lang="en" >
<head>       
    <meta charset="utf-8"/>
    <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"/>
</head>
<body>              
    <div id='myMain'>       
        <h2>  {{ title }}  </h2>
        {{ title2 }}                
        <br><br>
        
        <table>
            <!-- 加tag="tbody"让draggable渲染为tbody节点，符合table结构要求 -->
            <draggable :list="schoolInfo" tag="tbody">
                <!-- v-for绑定唯一key -->
                <tr v-for='(school, index) in schoolInfo' :key="school.id">
                    <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>
            </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>

内容的提问来源于stack exchange，提问作者user3280899