无法编辑从克隆的Vue，可拖动列表中的两个项目，项目是不是唯一的，增加onClone事件不工作？

问题描述

我有两个VUE-可拖动组分，一种是在一个单独的文件中。我利用“克隆”型可拖动其中的初始列表保持不变的。我使用的克隆能够列表作为工具栏拖放到的东西可以被重新排序列表。 See this example from their docs。

在您拖动和项目拖放到新的列表，您可以更新名称。然而，当我试图做到这一点，如果我有两个相同的部件，无论是他们的名字的将被改变，而不是仅仅一个。

我曾尝试增加对降小部件ID，但我这样做的时候，它看起来就像这样：Widgetone 1，WidgetTwo 2，Widgetone 1 3.这样肯定会告诉我的东西，我只是不知道究竟是什么

我一直在试图算出这个数天，我只是不能得到它，根据this它应该是那么容易，因为加入我的onClone方法，但是那并非如此。我真的可以使用一套新的眼睛和一些观点。

这里是可以得到拖放到列表中的代码：

            <draggable class="draggable-container" v-model="task.widgets" group="widgets" @change="onChange">
                <div id="draggable-element" v-for="(widget,i) in task.widgets" :key="widget.id" class="row">
                    <p>{{ widget.title }}</p>
                    <p>{{ widget.type }}</p>
                    <div class="dropdown-container" tabindex="-1">
                        <a>&#x22EE;</a>
                        <div class="dropdown">
                                <li @click="removeWidget(i)"><i class="fas fa-trash"></i> Remove widget</li>
                                <li @click="setTaskComponent(widget.type,i)"><i class="far fa-edit"></i> Edit widget</li>
                        </div>
                    </div>
                </div>
            </draggable>
            <p v-if="task.widgets.length <= 0">Drag an item from the widget toolbar and drop it here</p>
            <div v-if="show">
                <div class="close-container">
                    <p @click="show = false">&times;</p>
                </div>
                <div class="edit-widget-container">
                    <div class="edit-widget-name">
                        <label class="pt-1">Change widget name:</label>
                        <input type="text" placeholder="Edit widget name..."
                            @keyup.enter.prevent="(e) => {
                                task.widgets[widgetID].title = e.target.value;
                                e.target.value = '';
                            } "/>
                    </div>

      data() {
        return {
          currentWorkflow: '',show: false,taskComponent: '',widgetID: null,};
      },methods: {
            removeWidget(index) {
                this.task.widgets.splice(index,1);
            },onChange(e){
                console.log(e);
            },//gets component name from widget payload,sets the component for viewing
            //& assigns this.widgetID to the current widget ID so that only that widget will be updated
            setTaskComponent(component,id) {
                this.taskComponent = component;
                this.show = true;
                this.widgetID = id;
            },}

同时，这里是插件工具条的代码：

            <template>
      <div>
        <draggable class="widget-container" v-model="tasks" :group="{name: 'widgets',pull: 'clone',put: false}" :move="onChange">
                <div v-for="task in tasks" :key="task.id">
                    <p><i :class="task.icon"></i>{{ task.text }}</p>
                </div>
        </draggable>
      </div>
    </template>

    <script>
    import draggable from 'vuedraggable';

    export default {
      components: {
        draggable
      },data() {
        return {
                draggedElement: '',id: 0,tasks: [
                    {title: 'Text Widget',text: 'Text',icon: 'fas fa-font',type: 'TextEdit'},{title: 'Photo Widget',text: 'Photo',icon: 'far fa-image',type: 'Photo'},{title: 'Video Widget',text: 'Video',icon: 'fas fa-video',type: 'Video'},{title: 'Calendar Widget',text: 'Calendar',icon: 'far fa-calendar-plus',type: 'Calendar'},{title: 'Questionnaire Widget',text: 'Questionnaire',icon: 'fas fa-clipboard-list',type: 'Questionnaire'},{title: 'File Upload Widget',text: 'File Upload',icon: 'fas fa-file-upload',type: 'Upload'},{title: 'File Download Widget',text: 'File Download',icon: 'fas fa-download',type: 'Download'},{title: 'Delay Widget',text: 'Delay',icon: 'far fa-clock',type: 'Delay'},]
            };
      },methods: {
            onChange(e) {
                this.draggedElement = e.draggedContext.element;
                console.log(this.draggedElement)
            },async onClone({id}) {
                return {
                    id: this.id++,title: await this.draggedElement.title,text: await this.draggedElement.text,type: await this.draggedElement.type
                }
            }
        }
    };
    </script>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）