How to disable input in Vuejs Conditionally?

The idea here is that Your disabled attribute requires a boolean value.
Then You can manipulate :disabled attribute in vue.js.

<input :disabled="validated" />

the simplest way to do that is using an inline Code like this:


<button @click="disabled = !disabled">Enable/Disable</button>
<input type="text"  :disabled="disabled">


var app = new Vue({
  el: '#app',

  data: {
    disabled: false,

you can also do this:

var app = new Vue({
  el: '#app',

  data: {
    disabled: 0,
<script src=""></script>
<div id="app">
  <button @click="disabled = (disabled + 1) % 2">Toggle Enable</button>
  <input type="text" :disabled="disabled == 1">
  <pre>{{ $data }}</pre>

Using a Computed property (more efficient):
Use isDisabled Computed property to evaluate whatever you need to determine how your function is going to work.

<input type="text" :disabled=isDisabled>
  validated: 0; //false
computed: {
  isDisabled() {
    //  define your logic
   //   determine how your function will return the required data...
    return this.validated;

Computed properties help you control your returned value which should be in this case a boolean value (either true or false).

note: If isButtonDisabled has the value of null , undefined , or false , the disabled attribute will not even be included in the rendered <button> element.