[Vuejs]-VueJS how to make a button disabled, under different conditions?

by

0👍

  new Vue({
    el: '#example',
    data: {
      heal_used : 4, 
      diff:  3
    },
    methods: {
      takeBonus1: function () {
        this.heal_used=1;
        this.diff=0;
      },
      takeBonus2: function () {
        this.heal_used=1;
        this.diff=4;
      },
      takeBonus3: function () {
        this.heal_used=2;
        this.diff=.1;
      },
      reset: function () {
        this.heal_used=4;
        this.diff=3;
      }
    }
  })
<head>
  <title>My first Vue app</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
  <div id="example">
    <p>
      <span>heal_used: {{ heal_used }}</span>
      <span>diff: {{ diff }}</span>
    </p>
    <button 
      @click="takeBonus1()" 
      :disabled="heal_used===1 || diff < 1" >
        Take bonus (both)
    </button>
    <br>
    <button 
      @click="takeBonus2()" 
      :disabled="heal_used===1 || diff < 1" >
        Take bonus (heal_used===1)
    </button>
    <br/>
    <button 
      @click="takeBonus3()" 
      :disabled="heal_used===1 || diff < 1" >
        Take bonus (diff < 1)
    </button>
    <br>  
    <button 
      @click="reset()"> 
        Reset
    </button>
  </div>
</body>

Leave a comment