How to disable input conditionally in vue.js How to disable input conditionally in vue.js vue.js vue.js

How to disable input conditionally in vue.js


To remove the disabled prop, you should set its value to false. This needs to be the boolean value for false, not the string 'false'.

So, if the value for validated is either a 1 or a 0, then conditionally set the disabled prop based off that value. E.g.:

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

Here is an example.

var app = new Vue({  el: '#app',  data: {    disabled: 0  }}); 
<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>