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

Question

Good day developers. In this app, I'm trying to establish poll votes. So in my logic I did frame a tag in HTML with several buttons and their respective ids, where the user @click might be assigned to a different poll object.

All tags are click-bound to the same method, thus I'm just trying to increase by whichever tag id in order to reuse the same function (its name is scorer()). Let's say this is my tag:

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>

then the object in my data should return whichever one was clicked. The poll data is the following:

SCRIPT

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

The function should modify the object the user clicked. Basically, I'm just trying to compare the poll value inside the object with the clicked id (doc.getElementById, guess it's wrong) through a boolean; then if this state is true the item timesVoted would be updated plus 1....but guess this isn't the correct the way to set it cause it doesn't work:

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

Any idea about how I could improve this function without precisely creating a new method for each button. Thanks in advance!!! Have good day!!!

Answer 1

Try this way:

HTML

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

Method

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