title: How to make disabled button after click in Vuejs
body: <p>I have a button on my website that gives bonuses to the user. Button have several conditions in 1 button:</p>
  <pre><code>&lt;button class=&quot;btn btn--small btn--purple&quot; :disabled=&quot;isDisabled&quot; @click=&quot;takeBonus&quot;&gt;Take&lt;/button&gt;
  
   &lt;script&gt;
   ......
    computed: {
      isDisabled() {
        return this.heal_used === 1 || this.diff &lt; 10;
        this.$forceUpdate();
      },
    },
  .......
  &lt;/script
  </code></pre>
  <p>But when user click <code>Take</code> button, and if all success, button is still active <code>this.$forceUpdate();</code> not working. And i need make when user click <code>Take</code> button, and if all success, make this button disabled.</p>
  <p>My full Bonus.vue:</p>
  <pre><code>  &lt;template&gt;
  &lt;div class=&quot;inner-page&quot;&gt;
  &lt;div class=&quot;account&quot; v-if=&quot;loaded &amp;&amp; !$root.isMobile&quot;&gt;
    &lt;div class=&quot;page-header&quot;&gt;
    &lt;/div&gt;
  
  
  
  
    &lt;div class=&quot;form-panels hide-below-m&quot;&gt;
  
  
  
      &lt;div class=&quot;col-7&quot; style=&quot;margin-top: 5rem;margin-right: 3rem;&quot;&gt;
        &lt;div class=&quot;faucet-component mx-5&quot; rv-class-boost=&quot;data.boostIsOpen&quot;&gt;
          &lt;img src=&quot;https://dota2.skins1.games/src/img/components/shine.png?v=8ce59643e70cb2f8550deb6a249b5f29&quot; class=&quot;faucet-component__shine-bg&quot;&gt;
          &lt;div class=&quot;faucet-component__content d-flex justify-content-between align-items-center flex-column w-100&quot; style=&quot;
  height: 15rem;&quot;&gt;
            &lt;div class=&quot;faucet-component__available-amount-block round-circle p-2&quot;&gt;
              &lt;div class=&quot;faucet-component__availabe-amount-coins d-flex justify-content-center align-items-center round-circle h-100&quot; rv-currency=&quot;model:amount&quot;&gt;Спасение&lt;/div&gt;
            &lt;/div&gt;
            &lt;!-- rivets: unless model:cnt | eq 0 --&gt;&lt;div class=&quot;faucet-component__remaining&quot;&gt;
            &lt;span rv-t=&quot;&quot;&gt;Left&lt;/span&gt;:
            &lt;span&gt;{{ bonus_num }}&lt;/span&gt;&lt;br&gt;
            &lt;span rv-t=&quot;&quot;&gt;&lt;/span&gt;
            &lt;span&gt;{{ diff }}&lt;/span&gt;
          &lt;/div&gt;
  
            &lt;!-- rivets: if model:cnt | eq 0 --&gt;
  
  
            &lt;div class=&quot;faucet-component__buttons-container d-flex align-items-center w-75 justify-content-around&quot;&gt;
  
              &lt;button class=&quot;btn btn--small btn--purple&quot; :disabled=&quot;isDisabled&quot; @click=&quot;takeBonus&quot;&gt;Take&lt;/button&gt;
  
  
            &lt;/div&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
  
  
  &lt;/div&gt;
  
    &lt;/div&gt;
   &lt;/template&gt;
  
   &lt;script&gt;
  
  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(() =&gt; {
      this.getUser();
     }, 100);
    },
   computed: {
     isDisabled() {
       return this.heal_used === 1 || this.diff &lt; 10;
       this.$forceUpdate();
     },
   },
   methods: {
    getUser() {
     this.$root.axios.post('/user/getProfile')
        .then(res =&gt; {
          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 =&gt; {
          this.$root.isLoading = false;
          this.$router.go(-1);
        })
  },
  takeBonus() {
    this.$root.axios.post('/user/takeBonus', {
      value: this.user.cashback
    })
        .then(res =&gt; {
          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}`));
        })
   },
  }
  }
  </code></pre>
  
  <p>How i can make it, when user click <code>Take</code> button, and if all success, so that the <code>Take</code> button becomes disabled?</p>