Vue3+Vuedraggable插件使用指南：告别报错，轻松拖拽排序！

前端

2023-09-08 10:51:30

Vue3 + Vuedraggable：告别错误指南

简介

当您将 Vue2 项目升级到 Vue3 时，使用 Vuedraggable 插件时可能会遇到一些错误。本指南将深入探讨这些错误并提供切实可行的解决方案，让您轻松实现拖拽排序功能。

常见错误

1. TypeError: Cannot read properties of undefined (reading 'updated')

原因： 此错误源于语法问题，在 Vue3 中，v-for 不能与插槽同时使用。
解决方案： 从元素上移除 v-for，改用插槽语法来渲染列表项。

2. 报错 draggable element must have an item slot

原因： 此错误表示缺少 item 插槽。
解决方案： 确保在可拖拽元素上添加 item 插槽。

3. Vue3 + Vuedraggable 使用示例

<template>
  <div class="draggable-container">
    <draggable
      v-model="list"
      :item-key="item => item.id"
      @update="onReorder"
    >
      <template #item="{ element }">
        <div class="draggable-item">
          {{ element.name }}
        </div>
      </template>
    </draggable>
  </div>
</template>

<script>
import { Draggable } from 'vuedraggable';

export default {
  components: { Draggable },
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ],
    };
  },
  methods: {
    onReorder(newList) {
      this.list = newList;
    },
  },
};
</script>