[Vuejs]-How to show an attribute of an item (generated by a loop) on-click?

by

0👍

✅

I think you have put yourself into a corner because you are trying to use v-for where it is not needed, the lists look the same but you can just have them as separate components that happen to use the same classes.

Second problem is that you are overloading the Board.vue component with 3 different implementations.
If there are three boards that each behave differently from the others, then split those parts into their own components.

So you would end up with 3 board components, each displaying a different kind of board.

If you insist on avoiding writing things twice you can create a component to display a board and have the contents thereof be a slot.

Going your route, of forcing the templating to use a v-for over two different types of columns is not working out well, because you shouldn’t put draggable lists and a properties pane in the same v-for loop.

Because the drag and drop boards both are using draggable, you could make a single Board component that would present a draggable list of items and then emit an event (e.g. drop) when an item is dropped onto the board.

Because the difference in the snippets you shared for those boards was in the configuration of draggable, you can create props for enabling/disabling the drag-and-drop features for those boards (e.g. allow-drag, 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>

In this snippet the @select event is emitted by the boards when an item is selected, so the Home component can then set it as the focussed item and bind it to the PropertiesBoard to display its properties.

Edit: I’ve updated this snippet to show how to emit events from Board.vue

Leave a comment