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
.
This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.