对几个 html 标签 id 使用相同的方法，使其与发生 @click 的 id 做出反应

Question

开发者好！在此应用程序中，我正在尝试建立投票。所以在我的逻辑中，我确实在 HTML 中用几个按钮及其各自的 id 构建了一个标签，其中用户 @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>

那么我的数据中的对象应该 return 无论哪个被点击。投票数据如下：

脚本

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 }
    ],
  }
}

函数应该修改用户点击的对象。基本上，我只是试图通过一个布尔值将对象内部的poll值与点击的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++;
}

对几个 html 标签 id 使用相同的方法，使其与发生 @click 的 id 做出反应

using same method for several html tags ids making it react attuning with the id where the @click take place

javascript

vue.js

vue-component

vuejs2

v-for