对几个html标签id使用相同的方法，使其与@click发生的id进行调整

Question

祝开发人员愉快。在这个应用程序中，我正在尝试建立投票。因此，在我的逻辑中，我确实用几个按钮和它们各自的id在HTML中构建了一个标签，其中用户@click可能被分配给不同的轮询对象。

所有标签都被点击绑定到同一个方法，因此我只是试图增加任何一个标签id，以便重用相同的函数(其名称为scorer()(。假设这是我的标签：

HTML

<div id="pollVote">
<v-btn id="5pts" @click="pollView = false,scorer()" class="mb-3 lime lighten-2" width="40" x-small >5 pts</v-btn>
<v-btn id="4pts" @click="pollView = false,scorer()" class="mb-3 lime lighten-2" width="40" x-small>4 pts</v-btn>
<v-btn id="3pts" @click="pollView = false,scorer()" class="mb-3 lime lighten-2" width="40" x-small>3 pts</v-btn>
<v-btn id="2pts" @click="pollView = false,scorer()" class="mb-3 lime lighten-2" width="40" x-small >2 pts</v-btn>
<v-btn id="1pts" @click="pollView = false,scorer()" class="mb-3 lime lighten-2" width="40" x-small>1 pts</v-btn>
</div>

那么我的数据中的对象应该返回被点击的对象。轮询数据如下：

脚本

data(){
return{
pollComposer: [
{ poll: "5pts", timesVoted: 0.0, pts: 5.0 },
{ poll: "4pts", timesVoted: 0.0, pts: 4.0 },
{ poll: "3pts", timesVoted: 0.0, pts: 3.0 },
{ poll: "2pts", timesvoted: 0.0, pts: 2.0 },
{ poll: "1pts", timesVoted: 0.0, pts: 1.0 }
],
}
}

该函数应该修改用户单击的对象。基本上，我只是试图通过布尔值将对象内部的轮询值与单击的id(doc.getElementById，猜测它是错误的(进行比较；如果这个状态是真的，项目timesVoted将被更新加1……但我猜这不是正确的设置方式，因为它不起作用：

METHODS:{
scorer() {
this.pollComposer.forEach(iter => {
if(iter.poll===document.getElementById(iter.poll))  
return iter.timesVoted=timesVoted+1;
}
);
},
}

关于如何在不为每个按钮精确创建新方法的情况下改进此功能的任何想法。提前感谢！！！祝你今天愉快！！！

Answer 1

试试这个方法：

HTML

<div id="pollVote">
<v-btn v-for="vote in pollComposer" :id="vote.poll" @click="scorer(vote)">
{{ vote.pts }} pts
</v-btn>
</div>

方法

scorer(vote) {
this.pollView = false;
vote.timesVoted++;
}