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

时间:2019-06-18 15:50:22

标签: javascript vue.js vuedraggable

我正在使用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'] },

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

Working

但是当推送到生产环境时,拖放操作无效。

Not working

我检查了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>

这不是在本地发生,为什么在生产中会发生?以及我该如何解决?

0 个答案:

没有答案