Sometimes, we want to disable input conditionally with Vue.js.

In this article, we’ll look at how to disable input conditionally with Vue.js.

How to disable input conditionally with Vue.js?

To disable input conditionally with Vue.js, we can set the disabled prop to a boolean expression.

For instance, we write

<template>
  <div id="app">
    <button @click="disabled = !disabled">Toggle Enable</button>
    <input type="text" :disabled="disabled" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      disabled: true,
    };
  },
};
</script>

to add a button to toggle the disabled reactive property between true and false.

Then we set that as the value of the input’s disabled prop to disable the input only when disabled is true.

Conclusion

To disable input conditionally with Vue.js, we can set the disabled prop to a boolean expression.