如何显示单击的项目（由循环生成）的属性？

Question

在我的vue3应用中，我有三个板：

• 一个用于拖动元素（已经在JSON文件中定义）
• 一个用于辍学元素的一个（存储在VUE中的空列表中）
• <强>一个显示掉落元素的属性的一个，当您单击它

时，我将使用Vuedragggggggggggggggg =：：： img

我的问题是在第三板上：我想单击“ Drop板”中的项目并将其属性显示到“属性板”中，知道项目具有多个属性。 我已经尝试了好几天了，仍然找不到解决方案，有人可以帮我吗？

我是Vue和Stackoverflow的新手，我试图尽可能清楚，如果我犯了错误，我很抱歉。

主页

<template>
  <div>
      <Board v-for="(board, index) in boards" :key="index" :id="index" :board="board"/>
  </div>
</div>
</template>

<script>
import Board from "@/components/Board.vue";

export default {
  components: {
    Board,
  },
  data: () => ({
    boards: [
      {
        title: "Toolbox Board",
      },
      {
        title: "Mockup Board",
      },
      { title: "Properties" },
    ],
  }),
};

<div class="dd-container" v-if="board.title == 'Toolbox Board'">
  <draggable v-model="dragItems" item-key="id":group="{ name: 'items', pull: 'clone', put: false }" :clone="cloneItems" @change="log">
    <template #item="{ element }">
      <div class="item">
        {{ element.title }}
      </div>
    </template>
  </draggable>
</div>

。董事会“代码：

<div class="dd-container" v-if="board.title == 'Mockup Board'">
  <draggable
    v-model="dropItems" item-key="id" group="items" @change="log">
    <template #item="{ element }">
      <div class="item">
        {{ element.title }}
      </div>
    </template>
  </draggable>
</div>

板。

<div class="dd-container" v-if="board.title == 'Properties'">
    {{ property }} ??
</div>

import dragItemsList from "/dragItems.json";
import draggable from "vuedraggable";

export default {
  components: {
    draggable,
  },

  data() {
    return {
      dragItems: dragItemsList,
      dropItems: [],

Answer 1

我认为您已经将自己放在角落里，因为您试图在不需要的地方使用V-For，列表看起来相同，但是您可以将它们作为碰巧使用相同类别的单独组件。

第二个问题是您要超载板。
如果每个董事会的行为与其他董事会的行为不同，则将这些部分分为自己的组成部分。

因此，您最终会得到3个板组件，每个组件都显示不同的板。

如果您坚持要避免写两次写东西，则可以创建一个组件以显示板并具有插槽的内容。

走上路线，强迫模板在两种不同类型的列上使用v-for的路线不是很好的工作，因为您不应该将可拖动的列表和属性窗格放在同一V-For循环中。

因为拖放板都在使用拖放板，所以您可以制作一个单个板组件，以显示可拖动的项目列表，然后在将项目删除到板上时发射事件（例如drop） 。

因为您共享这些董事会共享的摘要的差异是在拖动的配置中代码> allow-drop ）。

<!-- Home.vue -->
<template>
  <div>
    <Board :items="dragItems" @select="select" allow-drag/>
    <Board :items="dropItems" @drop="transfer" @select="item => select(item)" allow-drop />
    <PropertiesBoard :selected="selectedItem" />
  </div>
</template>
<script>
export default {
  data: () => ({
    dragItems: [],
    dropItems: [],
    selectedItem: null,
  }),
  methods: {
    select(item) {
      console.log('Dropped', item);
      this.selectedItem = item;
    },
  },
};

</script>

<!-- Board.vue -->
<template>
  <button @click="testme">Trigger</button>
</template>
<script>
export default {
  methods: {
    testme() {
      const item = {
        id: 1,
        name: 'This is my item',
      };
      this.$emit('drop', item);
    },
  },
};
</script>

在此片段中，@Select事件是由板发出的，当选择项目时，董事会发出了事件，因此，HOME组件可以将其设置为焦点项目并将其绑定到属性板以显示其属性。

编辑：我已经更新了此片段，以显示如何从董事会发射事件