How to disable a button after clicking a button using vue.js

Question

I am making a voting application. I want to disable the button once clicking the voting button. How to disable the button.

template

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

script

  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()
  },

score 12 · Answer 1 · edited Dec 04 '19 at 21:38

12

The simplest thing do is set a variable when the voting button is pressed and then bind it to the buttons 'disabled' property:

v-bind:disabled="hasVoted"

edited Dec 04 '19 at 21:38

kaybee99

4,566
2
32
42

answered Jan 31 '19 at 20:42

Victor Behar

740
6
9

Psidom · Accepted Answer · 2018-06-12T02:56:02.527

11

v-btnhas a disabled property you can use; One way to do this could be create a clicked field to record all buttons you've clicked and check whether a specific button is in the clicked array:

<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>

In data, initialize clicked as an empty array:

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

Then in the doVote method, push the choice.id to clicked array when the event is fired:

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

edited Jun 12 '18 at 02:56

answered Jun 12 '18 at 02:41

Psidom

209,562
33
339
356

1

i don't think this will work , it will disable all the buttons , thought , as i see from his code there is an iterator on choices, i think it will be better if he add status isDisabled to the response choices from his API ? – Taha Azzabi Jun 12 '18 at 02:48
@TahaAzzabi Yeah. You're right. I missed the `for` loop completely :- – Psidom Jun 12 '18 at 02:56

score 1 · Answer 3 · answered Jun 12 '18 at 02:58

You can add an another variable (in this case votes) which will record the votes and then you can use it to determine if the button should be disabled (see votes.indexOf(choice.id) !== -1).

template:

  <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>

script

  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()
  },

score 1 · Answer 4 · answered Sep 04 '20 at 04:17

I just stumbled upon the same issue and I thought I'd share how I solved my problem which again will include creating another array to record your clicks like mentioned in the previous answers and then using Array.prototype.some() method to determine which buttons to disable by binding the disabled prop of your v-btn component like so:

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

I have to reference Michael's answer on this SO question which is where I found my solution

How to disable a button after clicking a button using vue.js

4 Answers4