2

我正在尝试从我的项目的 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>

4

1 回答 1

0

消除:

 components: {
   draggable: VueDraggableNext,
 },

添加:

schoolData.component('draggable',VueDraggableNext);

schoolData.mount('#myMain')

这应该解决组件。

于 2021-11-24T16:27:16.410 回答