Отключение и включение кнопки

169

04 сентября 2018, 10:50

Изначально кнопка заблокирована

<div id="test">
    <input type="text" v-model.lazy="send" name="send">
    <button v-bind:disabled="isButtonDisabled"></button>
</div>

В js файле:

var send = new Vue({
el: '#test',
data: {
    isButtonDisabled: true,
    canSend: false,
    send: ''
},
watch: {
    send: function(){
      this.send.length >= 2 ? send.canSend = true : send.canSend = false;
    }
}

Пишу условие в кнопке для её разблокировки:

<button v-if="canSend === true ? isButtonDisabled = false : isButtonDisabled = true" v-bind:disabled="isButtonDisabled"></button>

При наступлении условия canSend === true кнопка просто пропадает, при наступлении canSend === false кнопка возвращается. Что делать не знаю, документация Vue.js ответа не дала

Answer 1

Тут нюанс в том, что значение атрибута disabled не имеет значения :), важно его наличие (даже если он вообще без значения):

var app = new Vue({ 
  el: "button", 
  data: { 
    isButtonDisabled: true 
  } 
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> 
 
<button :disabled="isButtonDisabled">Click 1</button> 
<button :disabled="!isButtonDisabled">Click 2</button>

var send = new Vue({ 
  el: '#test', 
  data: { 
    isButtonDisabled: true, 
    canSend: false, 
    send: '' 
  }, 
  watch: { 
    send: function() { 
      this.canSend = this.send.length >= 2; 
      this.isButtonDisabled = !this.canSend; 
    } 
  } 
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> 
 
<div id="test"> 
  <input type="text" v-model="send" name="send"> 
  <button :disabled="isButtonDisabled">Send</button> 
</div>