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>
you could have a computed property that returns a boolean dependent on whatever criteria you need.
<input type="text" :disabled=isDisabled>
then put your logic in a computed property...
computed: { isDisabled() { // evaluate whatever you need to determine disabled here... return this.form.validated; }}
Not difficult, check this.
<button @click="disabled = !disabled">Toggle Enable</button><input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="disabled">