时间戳

首页 > 解决方案 > Vue3 vue-draggable-next 配置问题

javascript - Vue3 vue-draggable-next 配置问题

问题描述

我试图仅包含所有相关代码。这适用于 Vue3 和 VueDraggableNext。我想更改列表的顺序，而不是在列表之间移动它。

以下是模板和相关的脚本：

<template>
  <div class="childBox scripts">
   <draggable
       v-model="data.scriptList"
       element="div"
       class="dragArea"
       item-key="id"
   >
      <template 
        #item="{item}"
        element="div"
        class="selectedItems"
        item-key="id"
        :ref="item.label"
      >
         <span>{{item.label}}</span>
         <span class="remove" v-on:click="removeScript(item.id)"></span>
      </template>
    </draggable>
  </div>
</template>

import {ref} from 'vue';
import VueDraggableNext from 'vue-draggable-next';
    
export default {
  name: 'Scheduler',
  components: {
    Draggable: VueDraggableNext
  },
  setup() {
    const data = ref({
      scriptList: [
       {"id": 3, "label": "Yadda"},
       {"id": 2, "label": "Badda"},
       {"id": 13, "label": "Bing" }
      ]
    });
    
    return {
      data
    };
  },
methods: {
 removeScript: function(id) {
    //code here, but irrelevant.
},

上面的代码中没有呈现任何内容，除了：

 <draggable modelvalue="" element="div" class="dragArea" item-key="id"></draggable>

如果我用 v-for 替换可拖动部分，它会呈现，但当然没有可拖动操作：

<div v-for="item in data.scriptList" 
  :key="item.id" 
  class="selectedItems list-group-item"
  :ref="item.label">
  <span>{{ item.label }}</span>
  <span class="remove" v-on:click="removeScript(item.id)"></span>
</div>

标签： javascriptvuejs3vuedraggable

解决方案

这似乎是一个错字。您使用大写字母 D 导入组件，但在模板中使用小写字母 d。它们应该是相同的——在组件声明中称它为可拖动的。

您还需要将 VueDraggableNext 作为 'vue-draggable-next' 的一部分导入，因此名称需要用花括号括起来。

import { VueDraggableNext } from 'vue-draggable-next';

components: {
  draggable: VueDraggableNext
},

 <draggable
       v-model="data.scriptList"
       element="div"
       class="dragArea"
       item-key="id"
   >

推荐阅读