Форма в VueJS не проверяет, являются ли оба ввода пустыми

Question

Я создаю форму для ввода ниже в vuejs

{
      name: 'first_name',
      type: 'text',
      label: 'First Name',
      placeholder: 'First Name',
      required: true,
      validation_message: 'First name is required'
    },
    {
      name: 'email',
      label: 'Email',
      type: 'email',
      placeholder: 'Email',
      required: true,
      validation_message: 'Email is required'
    }

Я создал поле ввода следующим образом:

    <input
      :type="inputField.type"
      :placeholder="inputField.placeholder"
      :name="inputField.name"
      :id="inputField.name"
      v-model="userData[inputField.name]"
    />

Я установил data вот так:

data() {
    return {
      userData: {
        [this.inputField.name]: ""
      },
      isInputFieldRequired: this.inputField.required,
      isInputFieldEmpty: false
    };
  }

Я установил методы проверки, если вход не пустой, например:

methods: {
    checkIfInputFieldEmpty: function() {
      if (this.userData[this.inputField.name] === "") {
        return (this.isInputFieldEmpty = true);
      }
      this.isInputFieldEmpty = false;
    },
    checkIfRequiredFiledEmpty: function() {
      const { name, required } = this.inputField;
      return required && this.userData[name] === "";
    }
  }

Если одно из полей не пустое, это отправка формы. Как я могу обойти эту проблему?

Answer 1

Вы можете использовать Computed Properties и добавить поле value к своему inputFields. Чтобы проверить, можно ли отправить форму, вы можете использовать каждые :

var app = new Vue({
    el: '#app',
    data: {
      inputFields: [
        {
          name: 'first_name',
          type: 'text',
          label: 'First Name',
          placeholder: 'First Name',
          required: true,
          validation_message: 'First name is required',
          value: null,
        },
        {
          name: 'email',
          label: 'Email',
          type: 'email',
          placeholder: 'Email',
          required: true,
          validation_message: 'Email is required',
          value: null,
        }
      ],
    },
    computed: {
      allowSubmitForm: function(){
            return this.inputFields.every(
              inputField => inputField.value != null 
              && inputField.value != undefined
              && inputField.value != '');
        }
    }
  })

<div id="app">
   <form>
      <input v-for="inputField in inputFields"
      :type="inputField.type"
      :placeholder="inputField.placeholder"
      :name="inputField.name"
      :id="inputField.name"
      v-model="inputField.value" />
      <button type="submit" :disabled="!allowSubmitForm">Submit</button>
   </form>
</div>