How to Conditionally Disable a Button in Vue.js?

Find out how to toggle the disable attribute on a button element 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.


Hope you found this post useful. It was published . Please show your love and support by sharing this post.