How to disable input conditionally in Vue.js

In this Vue.js tutorial, we will show you how to conditionally disable an HTML input in a Vue.js component.

To disable the input, you should set the bound value of the disabled attribute to false (a boolean, not a string). When the bound value is true, the input is disabled; when false, it is enabled and editable.

Let’s consider a case where the disabled data property holds either 1 or 0. Since the :disabled binding expects a boolean, you can use a comparison so disabled == 1 correctly coerces 0 or 1 to false or true:

```<input type="text" :disabled="disabled == 1">```

Note: This example uses Vue 2. The :disabled binding syntax works identically in Vue 3.

How to disable input conditionally in Vue.js

<!DOCTYPE html>
<html>
  <head>
    <title>Disable input  in Vue.js</title>
  </head>
  <body>
    <div id="app">
      <button @click="disabled = (disabled + 1) % 2">Switch</button>
      <input type="text" :disabled="disabled == 1" />
      <pre>{{ $data }}</pre>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          disabled: 0
        }
      });
    </script>
  </body>
</html>

Try it Yourself »