I have an array of objects (items) that can be incremented with other items, which are displayed by looping through the array.
Take a look at the image here:
https://i.sstatic.net/AXRGQ.png
When I click on an item, I want to highlight it (for example: change its border-top-color), but I'm struggling to target a specific element and apply a style without affecting the entire array. Any suggestions?
This is my template, please note that I am using vuedraggable:
<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 : None of my previous code has worked, so here's just the data :
data() {
return {
dragItems: dragItemsList, //15 items that can be cloned into dropItems
dropItems: [], //Array where I can add the items from dragItems
};
},