change done.img on click todoapp with vueJs-CodePudding

Im practicising with VueJs and i would like able to click on awaiting.img then done.img will appear instead of other one. At moment everytime i click on awaiting.img it appear for every

I know i m would able to fix it with vanilla or using other framework instead vuejs but i need idea to fix with with vue.

Ty all :)

This is github pages of project : LINK this is github repo : 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('Sei sicuro di voler cancellare?')) {
        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 >
    <img src="img/awaiting.svg" alt="" @click="doneFunc(i)">
    <img src="img/done.svg" alt="" v-if="done">
    <button type="button"  aria-label="Close" @click="deleteTask(i)"></button>

  </div>

</li>

CodePudding user response：

change this:

<img src="img/done.svg" alt="" v-if="done">

to this:

<img src="img/done.svg" alt="" v-if="task.done">

and in your doneFunc:

doneFunc(indice){
    this.tasks[indice].done = true;
}