How to Conditionally Disable a Button in Vue.js?

To conditionally disable a button element in Vue.js, you can dynamically bind the disable attribute to an expression that evaluates to boolean true (to disable the button) or false (to enable the button).

For example, let's suppose you wish to disable the button when an <input /> element is empty, and enable it when it is filled in. You could do that in the following way:

  <input type="text" v-model="message" />
  <button :disabled="message === ''">Click Me</button>
// ...
data() {
    return {
        message: 'Hello Vue!',
// ...

Please note that :disable is a shorthand syntax for writing v-bind:disable.

This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.