How to disable button when input is empty in Vue?

Question

I'd bind a button to input using v-bind with a function :

The code inside my template :

<template>
  <input
    type="email"
    v-model="email"
    v-bind:placeholder="$t('fields.email_place_holder')"
  />
  <input
    v-bind:disabled="{ isDisable }"
    type="submit"
    v-bind:value="$t('buttons.notify_me')"
    class="notify-me-button"
  />
</template>

The code inside my script :

  methods: {
    isDisable() {
      return email.lenght > 0;
    }
  }

But the button does not change its status , I tried to change the css style with the same way and the result is the same.The problem is that button responds once time on the first value returned by isDisable().

Try converting isDisable to a computed property instead or replace isDisable with the condition you're checking for. i.e. <input :disabled="email.length > 0" type="submit" v-bind:value="$t('buttons.notify_me')" class="notify-me-button" /> — Ugo Okoro
– Ugo Okoro, Commented Nov 18, 2019 at 15:24
Directives requires only values not statements and conditions. — Ala Eddine Menai
– Ala Eddine Menai, Commented Nov 18, 2019 at 15:30
Also , when I test with console.log() I find that method executes once time not each time I type in the field. — Ala Eddine Menai
– Ala Eddine Menai, Commented Nov 18, 2019 at 15:38
If you choose to follow the directives using only values and not statements or expressions, then use a computed property computed: { emailLength: function () { return this.email.lenght > 0;}} The reason why the method executes only once is that it's not reactive. This is reactive and would change as the value of email changes. — Ugo Okoro
– Ugo Okoro, Commented Nov 18, 2019 at 15:54

xlm · Accepted Answer · 2021-11-14 03:00:40Z

The button isn't disabled because the binding disabled=isDisable is not reactive.

It's not reactive because the bound value isDisable is not a reactive property (in either data or computed) and it is not a method that has any reactive parameters i.e. it's called once/evaluated to the constant false. Vue won't check if there's reactive properties in the method body, after all methods are supposed to explicitly called in your code.

There's few ways you can fix this:

Make isDisable a computed property instead:

computed: {
  isDisable() {
    return this.email.length > 0;
  }
}

Pass a reactive property (e.g. email) as a parameter to your method so Vue knows to update the binding.

<input
  type="submit"
  :disabled="isDisable(email)"
/>

methods: {
  isDisable(email) {
    return email.length > 0;
  }
}

Directly bind a statement or condition that includes your reactive property (email). This is allowed.

<input
  type="submit"
  :disabled="email.length > 0"
/>

Working example on JS Fiddle

These would be the obvious (and perhaps idiomatic) approaches to fix this, but there are others e.g. using a watcher.

Note there's also typos in your provided code, e.g.:

:disabled="{isDisable}" is an not a valid binding due to the curly braces
isDisable(){ return email.lenght > 0 } should be length not lenght

Daisy · Accepted Answer · 2021-04-14 05:22:25Z

5

The easy way to do it is to check if the value exists or not. For example:

<input type="text" v-model="user.name" required />

For the submit button just use disable

<button type="submit" :disabled="!user.name">Submit</button>

Only when the field is filled then the submit button is enabled for submit.

answered Apr 14, 2021 at 5:22

Daisy

3484 silver badges8 bronze badges

Comments

Pang · Accepted Answer · 2021-03-20 02:35:38Z

1

Try this:

<button type="button" class="btn btn-primary btn-sm ripple-surface" v- 
  bind:disabled='!isDisabled'>Save</button>

   computed: {
        isDisabled() {
        return this.categoryName.length > 0;
    }
},

edited Mar 20, 2021 at 2:35

Pang

10.2k146 gold badges87 silver badges126 bronze badges

answered Mar 19, 2021 at 17:12

twostepdevelopers

736 bronze badges

Collectives™ on Stack Overflow

How to disable button when input is empty in Vue?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related