javascript - Vue可拖动在生产中不起作用

Question

我正在使用vue draggable它可以在本地工作，但不能在服务器上工作。

我有 4 个可拖动的组件，它们作为 2 组工作，像这样的活动和非活动组件

<draggable
    class="droppable-area"
    v-model="internal.fields" 
    :class="dragAreaClass"
    :group="activeFields"
    @start="start"
    @end="end" >
        <div class="d-inline-block draggable-block" v-for="field in internal.fields" :key="field.key">
             <v-chip class="btn-draggable k-orange-linear">
                 {{ field.label }}
             </v-chip>
        </div>
</draggable>
<draggable
    class="droppable-area"
    v-model="internal.columns" 
    :class="dragAreaClass"
    :group="activeColumns"
    @start="start"
    @end="end" >
         <div class="d-inline-block draggable-block" v-for="field in internal.columns" :key="field.key">
             <v-chip class="btn-draggable k-orange-linear">
                 {{ field.label }}
             </v-chip>
         </div>
</draggable>

每个可拖动组件的组是一个对象，例如

  allColumns: { name: 'allColumns', pull: ['allColumns', 'column'], put: ['allColumns','column'] },
  activeColumns: { name: 'column', pull: ['allColumns', 'column'], put: ['allColumns','column'] },

上面的代码在本地正常工作，我可以将元素从一个拖放到另一个没有问题，如下所示。

但是当推送到生产时，拖放不起作用。

我检查了 chrome 控制台中的元素，并注意到在生产中，group可拖动的属性显示为group="[object Object]".

<div data-v-7bc6f678="" class="flex drag-area xs12">
    <div data-v-7bc6f678="" group="[object Object]" class="droppable-area">
        ...
    </div>
</div>

<div data-v-200f17c0="" class="flex drag-area xs12">
    <div data-v-200f17c0="" group="[object Object]" class="droppable-area">
    </div>
</div>

这不会发生在本地，为什么会发生在生产中？我该如何解决？

标签： javascriptvue.jsvuedraggable