Vue3结合Vuedraggable：点击目标板元素，在属性面板展示其多属性的实现求助

Hey there! Let's get that Properties panel working properly. The main issue right now is that your three Board components are independent instances—so when you click an item in the Mockup Board, the Properties panel has no way of knowing which item was selected. We'll use Vue's built-in provide/inject feature to share the selected item state across components, which is perfect for your use case (no need for extra state management libraries if you don't want to add them yet).

Here's how to implement it step by step:

1. Add Shared State in Home.vue #

First, we'll define a reactive variable to track the selected item in your parent Home component, then "provide" it so child Board components can access it:

<template>
  <div>
    <Board v-for="(board, index) in boards" :key="index" :id="index" :board="board"/>
  </div>
</template>
<script>
import Board from "@/components/Board.vue";
import { ref, provide } from 'vue'; // Add these imports

export default {
  components: { Board },
  setup() { // Use Vue3 Composition API for cleaner state management
    const boards = ref([
      { title: "Toolbox Board" },
      { title: "Mockup Board" },
      { title: "Properties" },
    ]);
    const selectedItem = ref(null); // Track the clicked item here

    provide('selectedItem', selectedItem); // Make this state available to child components

    return { boards, selectedItem };
  },
};
</script>

2. Update Mockup Board to Handle Item Clicks #

Next, modify the Mockup Board section in Board.vue to add a click event to each item, and update the shared selectedItem when clicked. We'll also fix the cloneItems function to ensure cloned items retain all their properties:

<!-- Mockup Board section in Board.vue -->
<div class="dd-container" v-if="board.title == 'Mockup Board'">
  <draggable v-model="dropItems" item-key="id" group="items" @change="log">
    <template #item="{ element }">
      <!-- Add click event to set the selected item -->
      <div class="item" @click="selectItem(element)">
        {{ element.title }}
      </div>
    </template>
  </draggable>
</div>

Update the script in Board.vue to inject the shared state and add the required methods:

<script>
import dragItemsList from "/dragItems.json";
import draggable from "vuedraggable";
import { inject, ref } from 'vue'; // Add these imports

export default {
  components: { draggable },
  setup() {
    const dragItems = ref(dragItemsList);
    const dropItems = ref([]);
    const selectedItem = inject('selectedItem'); // Access the shared state from parent

    // Fix clone function to copy ALL item properties (not just title/id)
    const cloneItems = (item) => {
      return { ...item }; // Spread operator ensures all properties are cloned
    };

    // Update the shared selected item when an element is clicked
    const selectItem = (element) => {
      selectedItem.value = element;
    };

    const log = (evt) => {
      console.log(evt); // Keep your existing log function
    };

    return { dragItems, dropItems, cloneItems, selectItem, log, selectedItem };
  }
};
</script>

3. Update Properties Panel to Display Selected Item's Properties #

Finally, modify the Properties panel in Board.vue to render the selected item's properties, with fallback text for when no item is selected:

<!-- Properties Panel section in Board.vue -->
<div class="dd-container" v-if="board.title == 'Properties'">
  <div v-if="selectedItem" class="property-content">
    <h3>{{ selectedItem.title }}</h3>
    <h4>Properties:</h4>
    <ul>
      <!-- Loop through the item's properties -->
      <li v-for="(prop, idx) in selectedItem.properties" :key="idx">
        {{ prop }}
      </li>
      <!-- Fallback if there are no properties -->
      <li v-if="selectedItem.properties.length === 0">No properties available</li>
    </ul>
    <!-- Optional: Display other attributes like ID or fixed status -->
    <p><strong>ID:</strong> {{ selectedItem.id }}</p>
    <p><strong>Fixed:</strong> {{ selectedItem.fixed ? 'Yes' : 'No' }}</p>
  </div>
  <div v-else class="no-selection">
    Click an item in the Mockup Board to view its properties
  </div>
</div>

How It Works #

• The parent Home component holds the selectedItem state and makes it accessible to all child Board components via provide.
• When you click an item in the Mockup Board, the selectItem method updates the shared selectedItem state.
• The Properties panel reacts to changes in selectedItem and automatically renders the properties of the clicked item.

Test this out—click any item in your Mockup Board, and you should see its properties show up in the Properties panel right away!

内容的提问来源于stack exchange，提问作者realmhaven