Sometimes, we want to disable input conditionally in Vue.js.
In this article, we’ll look at how to disable input conditionally in Vue.js.
Disable Input Conditionally in Vue.js
We can disable input conditionally in Vue.js by passing in an expression into the disabled prop.
For instance, we can write:
<template>
<div id="app">
<button @click="disabled = !disabled">Toggle Enable</button>
<input type="text" :disabled="disabled" />
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
disabled: false,
};
},
};
</script>
We have the data method which returns the disabled reactive property.
Next, we add a button that toggles the disabled reactive property between true and false when we click it.
Below that, we pass in the disabled reactive property as the value of the disabled reactive prop.
Now when we click the button, the input will become disabled and enabled.
Conclusion
We can disable input conditionally in Vue.js by passing in an expression into the disabled prop.
