Блог

Главная - Вопросы по программированию - VueJS как отключить кнопку при разных условиях?

VueJS как отключить кнопку при разных условиях?

#vue.js

#vue.js

Вопрос:

У меня на сайте есть кнопка, которая дает бонусы пользователю. Мне нужно выполнить несколько условий в 1 кнопке.

Если heal_used = 1 или diff < 1 , кнопка должна быть отключена. Я пытался сделать это так:

 <button v-if="heal_used 1" :disabled="diff < 1" v-else class="btn btn--small btn--purple" @click="takeBonus">Take</button>

Но ничего не получалось. Кроме того, если кнопка активна и пользователь может получить бонус, после получения бонуса вам нужно сделать кнопку неактивной. Я сделал это так:

 if (data.type === 'success') {
          this.bonus_num = data.bonus_num;
          this.heal_used = data.heal_used;
          this.$forceUpdate();
        }

Это правда? Не могли бы вы помочь мне, пожалуйста, сделать 2 условия?

Обновить

Я меняю код на:

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

И добавить:

 computed: {
 isDisabled() {
  return this.heal_used = 1 || this.diff < 10;
},

},

Консоль.журнал говорит мне:

 console.log(data.heal_used);
console.log(data.diff);
0
17

Но кнопка все еще отключена, что не так?

ОБНОВЛЕНИЕ takeBonus:

 takeBonus() {
  this.$root.axios.post('/user/takeBonus', {
    value: this.user.cashback
  })
      .then(res => {
        const data = res.data;

        if (data.type === 'success') {
          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}`));
      })
},

Комментарии:

1. Должно быть this.heal_used === 1 . в противном случае вы просто устанавливаете ее на 1 каждый раз

2. да, теперь это работает. но другой, я добавляю к вычисляемому: this.$forceUpdate(); , и когда я нажимаю на кнопку, она не отключается, после щелчка

3. Непонятно, что takeBonus делает. Взаимодействует ли она с сервером? Что такое data.type ? Слишком много скрытого кода.

4. да, это сообщается с сервером, я обновляю свой вопрос с помощью кода

5. Вам никогда не понадобится forceUpdate . Но помимо этого, где происходит сбой функции? Протестируйте каждую переменную в консоли.

Ответ №1:

   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>