Vue Js Enable/Disable button on click: By setting the “disabled” attribute to true or false in Vue Js, we can control whether the button is enabled or disabled. With the :disabled binding, you can easily toggle a button’s enabled or disabled state based on certain conditions, such as a form being completed. In this tutorial, we will learn how you can enable or disable a button based on the click event.
How to Enable Disable button on click in Vue js?
To enable a button on click in Vue.js, we can use the v-bind:disabled directive, which only accepts a boolean value, i.e., true or false. If the :disabled value is true, that means the button is disabled, and if the :disabled value is false, that means the button is enabled. In the below example, we explain how to enable and disable buttons on click.
Vue Js Enable Disable Button on Click Example
<div id="app">
<button v-bind:disabled="isEnable">Signup</button><br><br>
<button @click="toggleEnable">click me</button>
</div>
<script type="module">
import { createApp } from "vue";
createApp({
data() {
return {
isEnable: true
}
},
methods: {
toggleEnable() {
this.isEnable = ! this.isEnable
}
}
}).mount("#app");
</script>
Output of above example
