更改完成.点击"使用vejs"

Question

我正在练习VueJs，我希望能够点击等待。我做完了。Img将代替另一个出现。每次我点击等待。

我知道我可以用香草或使用其他框架代替vue来修复它，但我需要用vue来修复它。

这是项目的github页面:LINK这是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 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>

Answer 1

改变这个:

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

:

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

和你的doneFunc:

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