close

How to disable input conditionally in vue.js

Hello Guys, How are you all? Hope You all Are Fine. Today we are going to learn How to disable input conditionally in vue.js in javascript. So Here I am Explain to you all the possible methods here.

Without wasting your time, Let’s start This Article.

How to disable input conditionally in vue.js ?

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

    to disable input conditionally in vue.js Bear in mind that ES6 Sets/Maps don't appear to be reactive as far as i can tell, at time of writing.

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

    to disable input conditionally in vue.js Bear in mind that ES6 Sets/Maps don't appear to be reactive as far as i can tell, at time of writing.

Method 1

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;
  }
}

Method 2

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">

Summery

It’s all About this article. Hope all method helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which method worked for you? Thank You.

Leave a Comment