Vuelidate how to conditionally disable submit button

user_1402073 0
Viewed 8064

How can I conditionally disable the submit button of my Vuelidate form if all the fields don't meet the required criteria?

I tried the below but :disabled will only accept the word disabled in there.

<form>
  <ol>
    <li class="inputQuestion" v-bind:class="{ 'error': $v.user.username.$error }">
      <label>Username:</label>
      <input v-model.trim="user.username" @input="$v.user.username.$touch()" />
    </li>
    <li class="inputQuestion" v-bind:class="{ 'error': $v.user.password.$error }">
      <label>Password:</label>
      <input v-model.trim="user.password" @input="$v.user.password.$touch()" />
    </li>

    <li class="submission">
      <button @click.prevent="submitForm" :disabled="$v.form.valid()">Sign In</button>
    </li>
  </ol>
</form>
vuelidate vuejs2
2 Answers

Another way to disable/enable the submit button with vuelidate:

<button @click.prevent="submitForm" :disabled="$v.$anyError">

user_110552580
Related