I am currently practicing with VueJs and I would like to be able to click on the 'awaiting.img' image, so that the 'done.img' image will appear instead of the other one. Currently, every time I click on the 'awaiting.img' image, it appears for every list item.
I know I could fix this using vanilla JavaScript or another framework instead of Vuejs, but I am looking for ideas on how to fix it specifically with Vue.
Thank you all :)
You can check out the project on GitHub pages: LINK
This is the GitHub repository: link
const {
createApp
} = Vue
createApp({
data() {
return {
done: false,
errorEmpty: false,
errorMinChar: false,
newTask: '',
tasks: [{
text: 'Fare i compiti',
done: false
},
{
text: 'Fare la spesa',
done: true
},
{
text: 'Fare il bucato',
done: false
}
]
}
},
methods: {
addNew() {
if (this.newTask == "") {
this.errorEmpty = true;
this.errorMinChar = false;
} else if (this.newTask.length < 3) {
this.errorMinChar = true;
this.errorEmpty = false;
} else {
this.errorEmpty = false;
this.errorMinChar = false;
this.tasks.push({
text: this.newTask
});
}
this.newTask = "";
},
deleteTask(indice) {
if (confirm('Are you sure you want to delete?')) {
this.tasks.splice(indice, 1);
}
},
doneFunc(indice) {
this.done = true;
console.log(indice);
}
},
mounted() {
}
}).mount("#app")<li v-for="(task,i) in tasks">
{{task.text}}
<div class="btnSection">
<img src="img/awaiting.svg" alt="" @click="doneFunc(i)">
<img src="img/done.svg" alt="" v-if="done">
<button type="button" class="btn-close mx-2" aria-label="Close" @click="deleteTask(i)"></button>
</div>
</li>