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

kaybee99 · Accepted Answer · 2019-12-04 21:38:17Z

13

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 4, 2019 at 21:38

kaybee99

4,7742 gold badges35 silver badges42 bronze badges

answered Jan 31, 2019 at 20:42

Victor Behar

8588 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

akuiper · Accepted Answer · 2018-06-12 02:56:02Z

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, 2018 at 2:56

answered Jun 12, 2018 at 2:41

akuiper

216k33 gold badges362 silver badges379 bronze badges

2 Comments

Taha Azzabi Over a year ago

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 ?

akuiper Over a year ago

@TahaAzzabi Yeah. You're right. I missed the for loop completely :-

Julian Paolo Dayag · Accepted Answer · 2018-06-12 02:58:05Z

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

Neenus · Accepted Answer · 2020-09-04 04:17:09Z

1

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

answered Sep 4, 2020 at 4:17

Neenus

1423 silver badges14 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related