Vue: Adding class to one item in v-for - vue.js

Question

I have a list of items in a v-for loop. I have a function on #click that will delete the item but I want to give it a class when I click it to change the background color for a short time so the user knows they clicked that item and it's deleting. In my deleteItem function, I set deletingItem to true but that obviously creates an issue because it will apply that class to all the divs in the in v-for. What is the best way to solve it so that it only gets applied to the div I click on?
<div :class="{'box': true, 'deleting-item': deletingItem}" v-for="(item,index) in items">
<div #click="deleteItem(item,index)>Delete</div>
</div>

Answer 1

You need to save the clicked item in a data property
<template>
<div>
<div v-for="(item, index) in items">
<button #click="deleteItem(index)" :class="{'delete-in-progress-class': index === indexOfDeletedItem}> {{item}} </button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: ['a', 'b', 'c']
indexOfDeletedItem: null
}
},
methods: {
deleteItem(index) {
this.indexOfDeletedItem = index;
setTimeout(() => { this.items.splice(index, 1); this.indexOfDeletedItem = null }, 1000); //delete item after 1s
}
}
}
</script>
<style>
.delete-in-progress-class {
background: red;
}
</style>
Obviously the solution above is naive. It'll probably go crazy if the user wants to delete many items in a short time, since the indices of an array shift around when you delete something.
But hopefully it'll give you an idea of how to conditionally apply styles in a list.