我是vue3和javascript的新手.我有两个列表和拖放系统.问题是,当我将组件从一个列表拖放到另一个列表时,我会将id增加1,但我无法获取被拖动对象的名称并显示它.方法"cloneComponent"中的方法显示的问题

<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"?请帮忙.

推荐答案

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

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

Javascript相关问答推荐

如何将Openjphjs与next.js一起使用?

变量的值在Reaction组件中的Try-Catch语句之外丢失

material UI按钮组样式props 不反射

类构造函数不能在没有用With Router包装的情况下调用

Use Location位置成员在HashRouter内为空

Reaction组件在本应被设置隐藏时仍显示

Nextjs 13.4 Next-Auth 4.2登录(&Quot;凭据&,{});不工作

TypeError:无法读取未定义的属性(正在读取';宽度';)

为什么可选参数的顺序会导致问题?

如何访问此数组中的值?

P5JS-绘制不重叠的圆

select 2-删除js插入的项目将其保留为选项

错误400:当我试图在React中使用put方法时,该字段是必需的

如何在preLoad()中自定义p5.js默认加载动画?

在特定区域的图像上 Select x和y,并在其上创建边框

如何在通过JavaScript添加图像后将其删除?

Qualtrics联合实验脚本随机化条件

我遇到了Phaser 3碰撞的问题

Svelte:数组内的值绑定不起作用

JavaScript数组首先按两个特定名称排序