web-dev-qa-db-ja.com

vue.jsを使用してボタンをクリックした後にボタンを無効にする方法

投票申し込みをしています。投票ボタンをクリックしたら、ボタンを無効にしたいのですが。ボタンを無効にする方法。

テンプレート

  <v-btn
   v-for="choice in data.choices"
   @click="doVote(choice.id)"
   color="success"
   v-bind:key="choice.id">
   votes: {{ choice.votes }}
  </v-btn>

脚本

  data () {
    return {
      vote: null,
      questions: [],
    }
  },

  methods: {
    fetchData () {
      this.$request.questions.list().then(res => {
        this.questions = res.data.results
      })
    },

    // add votes
    doVote (vote) {
      if (!vote) {
        return
      }
      this.$request.questions.vote(vote).then(res => {
        this.fetchData()
      })
    },

  mounted () {
    this.fetchData()
  },
2
nk18

v-btnhas disabled property 使用できます;これを行う1つの方法は、clickedフィールドを作成して、クリックしたすべてのボタンを記録し、特定のボタンがクリックされた配列にあるかどうかを確認することです。

<v-btn
   :disabled="clicked.includes(choice.id)"
   v-for="choice in data.choices"
   @click="doVote(choice.id)"
   color="success"
   v-bind:key="choice.id">
   votes: {{ choice.votes }}
</v-btn>

dataで、clickedを空の配列として初期化します。

data () {
    return {
      vote: null,
      questions: [],
      clicked: []
    }
  }

次に、doVoteメソッドで、イベントが発生したときにchoice.idclicked配列にプッシュします。

doVote (vote) {
  this.clicked.Push(vote)
  if (!vote) {
    return
  }
  this.$request.questions.vote(vote).then(res => {
    this.fetchData()
  })
}
7
Psidom

最も簡単な方法は、投票ボタンが押されたときに変数を設定し、それをボタンの「無効」プロパティにバインドすることです。

v-bind:disabled="hasVoted"
4
Victor Behar

投票を記録する別の変数(この場合はvotes)を追加し、それを使用してボタンを無効にするかどうかを決定できます(votes.indexOf(choice.id) !== -1を参照)。

テンプレート:

  <v-btn
   :disabled="votes.indexOf(choice.id) !== -1"
   v-for="choice in data.choices"
   @click="doVote(choice.id)"
   color="success"
   v-bind:key="choice.id">
   votes: {{ choice.votes }}
  </v-btn>

脚本

  data () {
    return {
      votes: [],
      vote: null,
      questions: [],
    }
  },

  methods: {
    fetchData () {
      this.$request.questions.list().then(res => {
        this.questions = res.data.results
      })
    },

    // add votes
    doVote (vote) {
      if (!vote) {
        return
      }
      this.$request.questions.vote(vote).then(res => {
        this.fetchData()
        this.votes.Push(vote);
      })
    },

  mounted () {
    this.fetchData()
  },
0