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:

<template>
  <input type="text" v-model="message" />
  <button :disabled="message === ''">Click Me</button>
</template>

<script>
// ...
data() {
    return {
        message: 'Hello Vue!',
    };
},
// ...
</script>

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