Disable input conditionally in Vue.js

If you want to disable and enable input conditionally you have to add the condition in the input tag. Here is an example, we want to disable the input if the condition validation is false otherwise the input must be enabled.

The Vue.js component is


ready() {

        this.form.name = this.store.name;

        this.form.validated = this.store.validated;



<input type="text" id="name"
class="form-control" name="name” v-model="form.name"
:disabled="validated ? '' : disabled">

The Boolean value for Validated is either 0 or 1.

<input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated = 1">