Nuxt3中vuedraggable定制组件设置

Question

我很难让vuedraggable (https://github.com/SortableJS/vue.draggable.next)在Nuxt 3中工作。下面是我迄今为止遵循的步骤。

npm install vuedraggable@next

然后在/plugins/vue-draggable.client.js中创建这个文件

import draggable from 'vuedraggable'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('draggable', draggable);
})

然后在模板中我做了这个

<template>
  <draggable v-model="items" handle=".handle">
    <div class="item" v-for="item in items">
      <div class="title">{{item.title}}</div>
      <div class="handle">Sort</div>
    </div>
  </draggable>
</template>

<script setup>
let items = $ref([
  {
    title: 'Item 1'
  },
  {
    title: 'Item 2'
  },
  {
    title: 'Item 3'
  }
]);
</script>

在控制台中，我得到了以下错误：

[Vue warn]: Failed to resolve component: draggable
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

当模板呈现如下所示时：

​

​

我不知道我错过了哪一步？

Answer 1

因此，原来我看错了文档，Vue3版本的VueDraggable有一个新的语法：

<draggable v-model="items" handle=".handle">
 <template #item="{element: item}">
  <div class="item">
    <div class="title">{{item.title}}</div>
    <div class="handle">Sort</div>
  </div>
 </template>
</draggable>

这是正确的语法。

我遇到的一个问题是模板只能有一个根元素，现在它运行得很好。