How to bind style on-click in a loop

user_18988456 0
Viewed 41

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

see:

enter image description here

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
            class="item"
            :key="element"
            @click="
              messageItemTitle(element.title);
              messageItemID(element.id);
              "
          >
            <div class="item-title">
              {{ element.title }}
            </div>
            <div class="item-subType">
              {{ 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
    };
  },
vuejs3 vue.js css loops javascript
1 Answers

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
            class="item"
            :class="selected === element.id && 'selected'"
            :key="element"
            @click="message(element)"
          >
            <div class="item-title">
              {{ element.title }}
            </div>
            <div class="item-subType">
              {{ element.type }}
            </div>            
            
          </div>
    <!--</template>-->
  </div>
</div>

user_119891890
Related