How to disable the button in Vue
In this tutorial, we are going to learn about how to disable or enable the html button element in a Vue app.
We mostly disable the button when a (form) input field or textarea value is empty in login or contact forms.
Disabling the Button
To disable a button, we need to pass the boolean value true to the <button> element disabled
attribute.
App.vue
<template>
<div class="container">
<button :disabled="isActive">Subscribe</button> </div>
</template>
<script>
export default {
data() {
return {
isActive: true, };
},
}We can enable it by back, by changing the isActive property value to true.
App.vue
<template>
<div class="container">
<button :disabled="isActive">Subscribe</button> </div>
</template>
<script>
export default {
data() {
return {
isActive: false, };
},
}Disabling the button conditionally
We can also disable the button conditionally, for example when an input field value is empty; the button is disabled and button is enabled back when it has some data.
Example:
App.vue
<template>
<div class="container">
<input placeholder="email" v-model="email" /> <button :disabled="!email.length">Subscribe</button> </div>
</template>
<script>
export default {
data() {
return {
email: "", };
},
}Disabling the button by after click
We can also disable the button after clicking on it.
App.vue
<template>
<div class="container">
<button :disabled="!isActive">Disable</button> </div>
</template>
<script>
export default {
data() {
return {
isActive: true,
};
},
}- Share:
