Sometimes, we may want to disable inputs conditionally in our Vue 3 apps.
In this article, we’ll look at how to disable input elements conditionally in Vue 3.
Disable Input Conditionally in Vue.js 3
We can disable inputs conditionally with Vue 3 by setting the disabled prop to the condition when we want to disable the input.
For instance, we can write:
<template>
<input :disabled="disabled" />
<button @click="disabled = !disabled">toggle disable</button>
</template>
<script>
export default {
name: "App",
data() {
return {
disabled: false,
};
},
};
</script>
We have the input with the disabled prop set to the disabled reactive property.
Below that, we have the @click directive to toggle the disabled reactive property when we click the button.
When disabled is true , then the input will be disabled.
So when we click the button repeatedly, the input will be disabled and enabled again.
Conclusion
We can conditionally disable an input with Vue 3 by setting the disabled prop of the input to an expression that has the condition of when we want to disable the input.
