Как отключить кнопку, пока хотя бы один из полей ввода с пустым значением?

Question

Всем привет. Есть массив, который рендерит <input> через цикл. По-умолчанию значение value: ''.

Как добавить аттрибут disabled, при условии, что хотя бы одно поле пустое?

Спасибо.

const app = new Vue({
  el: "#app",
  data: {
    inputs: [{
        value: ''
      },
      {
        value: ''
      },
      {
        value: ''
      },
    ],
    disabledButton: true,
  },
  computed: {
    isDisabled() {
      return this.disabledButton;
    },
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input v-for="item in inputs" type="text" />
  <button :disabled="isDisabled">Button</button>
</div>

Answer 1

Можно использовать функцию every для проверки всех value у inputs или же, можно использовать функцию some, для того чтобы избавиться от отрицания в темплейте.

Так же, если вы хотите связать каждое value к своему <input> - необходимо использовать v-model (двухстороннее связывание).

const app = new Vue({
  el: "#root",
  data: {
    inputs: [
      { value: '' },
      { value: '' },
      { value: '' },
    ],
  },
  computed: {
    isButtonEnabled() {
      return this.inputs.every(input => input.value !== '');
    },
    //  isButtonDisabled() {
    //   return this.inputs.some(input => input.value === '');
    //  },
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="root">
  <input v-for="(item, index) in inputs" type="text" v-model="inputs[index].value"/>
  <button :disabled="!isButtonEnabled">Button</button>
  <!-- <button :disabled="isButtonDisabled">Button</button> -->
</div>

БЛОГ НА HUSL

Как отключить кнопку, пока хотя бы один из полей ввода с пустым значением?

Ответы (1 шт):