How to Disable Button in VueJS

In Vue.js, you can easily disable a button by using the :disabled attribute binding, which evaluates to a boolean value. If the value is true, the button will be disabled, and if it’s false, the button will be enabled.
Here’s a step-by-step example to illustrate how to disable a button based on a condition in Vue.js:

Example
Create a Vue Component
In this example, we will create a simple Vue component that has a button and an input field. The button will be disabled until the input field has some text.

<template>
   <div>
       <input v-model="inputText" placeholder="Type something...">
       <button :disabled="!inputText">Submit</button>
   </div>
</template>
<script>

   export default {
       data() {
           return {
               inputText
           }
       }
   }

</script>

Explanation

1. Template:

• v-model directive is used to bind the inputText data property to the input field. This means that the value of inputText will automatically update whenever the user types something in the input field.
• :disabled attribute is a shorthand for v-bind:disabled. This directive binds the disabled attribute of the button to the expression !inputText. The expression evaluates to true if inputText is empty, thereby disabling the button, and false if inputText has a value, thereby enabling the button.

2. Vue Instance:

• We create a new Vue instance and bind it to the #app element in the DOM.
• The data function returns an object containing the inputText property, which is initially set to an empty string.