How to bind style on-click in a loop-CodePudding

I've an array of objects (items) that can be incremented with other items, I show them by looping into the array.

see:

and I would like to high-light an item when I click on it (e.g. : another border-top-color), but I'm failing at targeting one specific element and applying a style without applying the style to the whole array. Any idea?

Template, I'm using vuedraggable, don't mind it:

<template #item="{ element }">
          <div
            
            :key="element"
            @click="
              messageItemTitle(element.title);
              messageItemID(element.id);
              "
          >
            <div >
              {{ element.title }}
            </div>
            <div >
              {{ element.type }}
            </div>            
            
          </div>
</template>

The script : Well, none of what I've coded previously worked, so here's the data only :

data() {
    return {
      dragItems: dragItemsList, //15 items that I can clone into dropItems 
      dropItems: [],            //Array where I can add the items from dragItems
    };
  },

CodePudding user response：

You can conditionally apply class:

const app = Vue.createApp({
  data() {
    return {
      items: [{id:1, title: 'aaa', type: 'type1'}, {id:2, title: 'bbb', type: 'type2'}, {id:3, title: 'ccc', type: 'type3'}],
      selected: null
    };
  },
  methods: {
    message(el) {
      this.selected = el.id
    }
  }
})
app.mount('#demo')

.item {
  border: 3px solid transparent;
  border-top-color: black;
}
.selected {
  border-top-color: green;
}

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div v-for="(element, i) in items" :key="i">
    <!--<template #item="{ element }">-->
          <div
            
            :
            :key="element"
            @click="message(element)"
          >
            <div >
              {{ element.title }}
            </div>
            <div >
              {{ element.type }}
            </div>            
            
          </div>
    <!--</template>-->
  </div>
</div>