используя тот же метод для нескольких идентификаторов html тегов, заставляя его реагировать на настройку с идентификатором, где происходит @click - PullRequest
Новая
       84

используя тот же метод для нескольких идентификаторов html тегов, заставляя его реагировать на настройку с идентификатором, где происходит @click

1 голос
/ 11 апреля 2020

Добрый день разработчики. В этом приложении я пытаюсь установить sh опрос голосов. Так что в моей логике c я создал тег в HTML с несколькими кнопками и соответствующими им идентификаторами, где пользователь @click может быть назначен другому объекту опроса.

Все теги являются click- привязан к тому же методу, поэтому я просто пытаюсь увеличить идентификатор тега, чтобы повторно использовать ту же функцию (ее имя 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>

тогда объект в моих данных должен возвращаться в зависимости от того, какой из них был нажат. Данные опроса следующие:

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

Функция должна изменять объект, выбранный пользователем. По сути, я просто пытаюсь сравнить значение опроса внутри объекта с идентификатором, по которому щелкнули (doc.getElementById, думаю, что это неправильно) с помощью логического значения; тогда, если это состояние истинно, элемент timesVoted будет обновлен плюс 1 .... но думаю, что это неправильный способ установить его, потому что он не работает: 

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

Любой Идея о том, как я мог бы улучшить эту функцию без точного создания нового метода для каждой кнопки. Заранее спасибо!!! Хорошего дня !!!

1 Ответ

2 голосов
/ 11 апреля 2020

Попробуйте следующим образом:

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++;
}
...