如何用新ID和同名制作数组对象的克隆？

Question

我是Vue3和JavaScript的新手。我有2个列表和拖放系统。问题是当我将组件从一个列表拖放到另一个列表时，我将ID增加1个，但是我无法获得拖动对象的名称并显示它。在方法“ clonecontent”中显示的问题

<template>
  <div class="full-zone">
    <div class="components">
      <h3>Компоненты бота:</h3>
      <draggable
          class="dragArea"
          :list="list1"
          :group="{ name: 'people', pull: 'clone', put: false }"
          :clone="cloneComponent"
          @change="log"
          item-key="id"
      >
        <template #item="{element}">
          <div class="list-group-item">
            {{ element.name }}
          </div>
        </template>
      </draggable>
    </div>

    <div class="constructor">
      <h3>Конструктор</h3>
      <draggable
          class="constructor-list"
          :list="list2"
          group="people"
          @change="log"
          item-key="id"
      >
        <template #item="{ element, index }">
          <div class="list-group-item">
            {{ element.name }}
            <div>
              <input type="text" class="input" v-model="element.text" placeholder="Введите текст компонента" />
              <span @click="remove(index)" class="remove">x</span>
            </div>
          </div>
        </template>
      </draggable>
    </div>

    <div>
      <button class="btn">Сгенерировать бота</button>
    </div>
    <rawDisplayer class="col-3" :value="list1" title="List 1" />
    <rawDisplayer class="col-3" :value="list2" title="List 2" />
  </div>
</template>

<script>
import draggable from "vuedraggable";
let idGlobal = 4;
export default {
  name: "clone",
  display: "Clone",
  order: 2,
  components: {
    draggable
  },
  data() {
    return {
      list1: [
        { name: "Сообщение", text: "", id: 1 },
        { name: "Заметка", text: "", id: 2 },
        { name: "Кнопка", text: "", id: 3 },

      ],
      list2: []
    };
  },
  methods: {
    log: function(evt) {
      window.console.log(evt);
    },
    cloneComponent() {
      return {
        id: idGlobal ++,
      }
    },
    remove(idx) {
      this.list2.splice(idx, 1);
    },

  }
};
</script>

不仅如何返回“ id”，还可以同时返回“ name”？请帮忙。

Answer 1

您需要将项目发送到其他列表

// tolist = can be 1 or 2
cloneComponent(item, tolist) {
    if (tolist === 2) {
        this.list2.push(item)
    } else {
        this.list1.push(item)
    }
}