addeventlistener上的计数器增量出现问题

Question

我遇到了一个不知道如何解决的问题…

这是：(JavaScript(

export default {
name: "TodoList",
data () {
return  {
titre: "",
contenu: null,
isDone: true,
count : 0,
nocount : 0,
}
},
methods: {
add() {
let tr = document.createElement("tr");
let td1 = document.createElement("td");
let td2 = document.createElement("td");
let td3 = document.createElement("td");
td1.textContent = this.titre;
td2.textContent = this.contenu;
td3.textContent = this.isDone ? "✓" : "❌";
td3.addEventListener('click',function (){
this.count++; //my problem is on this part, my counter doesn't increment
this.nocount--; //here, this doesn't work too
td3.textContent = this.isDone ? "❌" : "✓"; //this works
})

if(this.isDone) {this.count++} //this works and increments
else{this.nocount++} // this also
tr.append(td1, td2, td3);
this.$refs.tableau.appendChild(tr);}
},
computed: {
countDone : function ()  {
return this.count;
},
countUnDone: function () {
return this.nocount;
}
}}
</script>

(HTML(

<template>
<div id="todolist">
<h1> TodoList </h1>
<p> {{count}} </p>
<p> {{nocount}} </p>
<form>
<h2> Ajouter un élément</h2>
<h5> Titre </h5>
<input type="text" v-model="titre">
<h5> Description </h5>
<input type="text" v-model="contenu">
<br>
<label for="isDone"> Tâche déjà réalisée ? </label> <input type="checkbox" id="isDone" v-model="isDone">
<br>
<button type="button" @click="add"> Ajouter </button>
</form>
<h2> Liste </h2>
<table> <thead> <tr> <th> Titre </th> <th> Description </th> <th> Etat </th> </tr> </thead>
<tbody ref="tableau" id="tableau"> </tbody>
</table>
</div>
</template>

图片：

点击十字架当我点击十字架时，通常我的勾号计数器会增加，十字架计数器会减少，但不幸的是，没有发生任何事件。

你知道吗？

谢谢

祝度过美好的一天

Answer 1

问题的解决方案是在添加事件侦听器时使用箭头函数而不是匿名函数，因为匿名函数与它们所使用的函数有单独的上下文，因此它们不具有vue实例属性，箭头扣篮解决了这个问题。

所以，使用这个：

td3.addEventListener('click'，((=>｛