Stopbyte

How to disable input in Vuejs Conditionally?

Web Development Javascript
#1

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:

HTML:

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

Vuejs:

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

  data: {
    disabled: false,
  },
});

you can also do this:

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

  data: {
    disabled: 0,
  },
}); 

#HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="disabled = (disabled + 1) % 2">Toggle Enable</button>
  <input type="text" :disabled="disabled == 1">
    
  <pre>{{ $data }}</pre>
</div>

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>

data:{
  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.

2 Likes