How to make disabled button after click in Vuejs

Question

I have a button on my website that gives bonuses to the user. Button have several conditions in 1 button:

<button class="btn btn--small btn--purple" :disabled="isDisabled" @click="takeBonus">Take</button>

 <script>
 ......
  computed: {
    isDisabled() {
      return this.heal_used === 1 || this.diff < 10;
      this.$forceUpdate();
    },
  },
.......
</script

But when user click Take button, and if all success, button is still active this.$forceUpdate(); not working. And i need make when user click Take button, and if all success, make this button disabled.

My full Bonus.vue:

  <template>
<div class="inner-page">
<div class="account" v-if="loaded && !$root.isMobile">
  <div class="page-header">
  </div>




  <div class="form-panels hide-below-m">



    <div class="col-7" style="margin-top: 5rem;margin-right: 3rem;">
      <div class="faucet-component mx-5" rv-class-boost="data.boostIsOpen">
        <img src="https://dota2.skins1.games/src/img/components/shine.png?v=8ce59643e70cb2f8550deb6a249b5f29" class="faucet-component__shine-bg">
        <div class="faucet-component__content d-flex justify-content-between align-items-center flex-column w-100" style="
height: 15rem;">
          <div class="faucet-component__available-amount-block round-circle p-2">
            <div class="faucet-component__availabe-amount-coins d-flex justify-content-center align-items-center round-circle h-100" rv-currency="model:amount">Спасение</div>
          </div>
          <!-- rivets: unless model:cnt | eq 0 --><div class="faucet-component__remaining">
          <span rv-t="">Left</span>:
          <span>{{ bonus_num }}</span><br>
          <span rv-t=""></span>
          <span>{{ diff }}</span>
        </div>

          <!-- rivets: if model:cnt | eq 0 -->


          <div class="faucet-component__buttons-container d-flex align-items-center w-75 justify-content-around">

            <button class="btn btn--small btn--purple" :disabled="isDisabled" @click="takeBonus">Take</button>


          </div>

        </div>
      </div>

    </div>


</div>

  </div>
 </template>

 <script>

export default {
    data() {
    return {
  loaded: false,
  bonus: {},
  diff: {},
  user: {},
  bonus_num: 0,
  heal_used: {}
    }
    },
mounted() {
  this.$root.isLoading = true;
     if (!this.$cookie.get('token')) {
     this.$root.isLoading = false;
     this.$router.go(-1);
  }

this.domain = window.location.protocol + '//' + window.location.hostname;

  setTimeout(() => {
    this.getUser();
   }, 100);
  },
 computed: {
   isDisabled() {
     return this.heal_used === 1 || this.diff < 10;
     this.$forceUpdate();
   },
 },
 methods: {
  getUser() {
   this.$root.axios.post('/user/getProfile')
      .then(res => {
        const data = res.data;

        console.log(data.heal_used);
        console.log(data.diff);
        this.loaded = true;
        this.user = data.user;
        this.bets = data.bets;
        this.bonus = data.bonus;
        this.diff = data.diff;
        this.heal_used = data.heal_used;
        this.new_day = data.new_day;
        this.bonus_num = data.bonus_num;
        this.$root.isLoading = false;
      })
      .catch(err => {
        this.$root.isLoading = false;
        this.$router.go(-1);
      })
},
takeBonus() {
  this.$root.axios.post('/user/takeBonus', {
    value: this.user.cashback
  })
      .then(res => {
        const data = res.data;

        if (data.type === 'success') {
          console.log(data.heal_used);
          this.bonus_num = data.bonus_num;
          this.$root.user.balance = data.newBalance;
          this.heal_used = data.heal_used;
          this.$forceUpdate();
        }

        this.$root.showNotify(data.type, this.$t(`index.${data.message}`));
      })
 },
}
}

How i can make it, when user click Take button, and if all success, so that the Take button becomes disabled?

this.$forceUpdate(); is unreachable because it is placed after return — Anatoly
– Anatoly, Commented Jan 12, 2021 at 19:01
Can you show data state after all needed changes using Vue dev tools for instance? — Anatoly
– Anatoly, Commented Jan 12, 2021 at 19:32
Before: console.log(this.heal_used); -> 0 console.log(this.diff); -> 8, After click to Take button: console.log(this.heal_used); -> 1 console.log(this.diff); -> 8 — yrbet
– yrbet, Commented Jan 12, 2021 at 19:52

Bernard · Accepted Answer · 2021-01-12 20:34:16Z

1

I'm sorry but your code has no indentation, so I just did that on jsfiddler so you know "How to make disabled button after click in Vuejs". You can have a look on : https://jsfiddle.net/o81yvn05/1/

<div id="app">
  <button :disabled="isDisabled" @click="disableButton()">Please click here</button>
</div>

<script>
    new Vue({
      el: "#app",
      data: {
        isDisabled: false,
      },
      methods: {
            disableButton() {
            this.isDisabled = true
          }
        }
    })
</script>

edited Jan 12, 2021 at 20:34

answered Jan 12, 2021 at 20:08

Bernard

1651 silver badge11 bronze badges

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

2 Comments

yrbet Over a year ago

yes, it's work, but how i can add this.isDisabled = true to my code? because in my code it's not work

Bernard Over a year ago

Sorry I don't get it, you can just add it to data.

Collectives™ on Stack Overflow

How to make disabled button after click in Vuejs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related