Whenever I click on a specific element in the v-for loop, I want to receive feedback within that same element. However, I am running into an issue where the feedback is only displayed after the second click on the element.
This Vue code snippet
<i @click="addToCart(dish), getFeedback(dish);" class="fa-solid fa-plus d-flex justify-content-center align-items-center mt-3"></i>
<span class="alert alert-primary d-none">
You have added the dish to the cart
</span>
This is the method
getFeedback(){
const addDish = document.querySelectorAll('.fa-plus');
const alert = document.querySelectorAll('.alert');
// ISSUE ON SECOND CLICK
for(let i = 0; i < addDish.length; i++){
addDish[i].addEventListener('click', function(){
alert[i].classList.remove('d-none');
addDish[i].classList.remove('d-flex');
addDish[i].classList.add('d-none');
setTimeout(function(){
alert[i].classList.add('d-none');
addDish[i].classList.add('d-flex');
addDish[i].classList.remove('d-none');
},2000);
})
}
},