CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
nk18
nk18

Reputation: 209

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

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

Upvotes: 9

Views: 39521

Answers (4)

Neenus
Neenus

Reputation: 142

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

Upvotes: 1

Victor Behar
Victor Behar

Reputation: 848

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"

Upvotes: 13

Julian Paolo Dayag
Julian Paolo Dayag

Reputation: 3719

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

Upvotes: 1

akuiper
akuiper

Reputation: 214927

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

Upvotes: 11

Related Questions