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.