How to disable input conditionally in vue.js

How to disable input conditionally in vue.js

I have an input:

and in my Vue.js component, I have:
..
..
ready() {
this.form.name = this.store.name;
this.form.validated = this.store.validated;
},
..

validated being a boolean, it can be either 0 or 1, but no matter what value is stored in the database, my input is always disabled.
I need the input to be disabled if false, otherwise it should be enabled and editable.
Update:
Doing this always enables the input (no matter I have 0 or 1 in the database):

Doing this always disabled the input (no matter I have 0 or 1 in the database):

Solutions/Answers:

Solution 1:

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.

Solution 2:

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

Solution 3:

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

jsfiddle

Related:  combine dynamic and static classes through css binding, knockout.js

Solution 4:

Your disabled attribute requires a boolean value:

<input :disabled="validated" />

Notice how i’ve only checked if validated – This should work as 0 is falsey …e.g

0 is considered to be false in JS (like undefined or null)

1 is in fact considered to be true

To be extra careful try:
<input :disabled="!!validated" />

This double negation turns the falsey or truthy value of or 1 to false or true

don’t believe me? go into your console and type !!0 or !!1 🙂

Also, to make sure your number 1 or are definitely coming through as a Number and not the String '1' or '0' pre-pend the value you are checking with a + e.g <input :disabled="!!+validated"/> this turns a string of a number into a Number e.g

+1 = 1
+'1' = 1

Like David Morrow said above you could put your conditional logic into a method – this gives you more readable code – just return out of the method the condition you wish to check.

Related:  Forcing garbage collection in Google Chrome

Solution 5:

You can manipulate :disabled attribute in vue.js.

It will accept a boolean, if it’s true, then the input gets disabled, otherwise it will be enabled…

Something like structured like below in your case for example:

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

Also read this below:

Conditionally Disabling Input Elements via JavaScript
Expression

You can conditionally disable input elements inline
with a JavaScript expression. This compact approach provides a quick
way to apply simple conditional logic. For example, if you only needed
to check the length of the password, you may consider doing something
like this.

<h3>Change Your Password</h3>
<div class="form-group">
  <label for="newPassword">Please choose a new password</label>
  <input type="password" class="form-control" id="newPassword" placeholder="Password" v-model="newPassword">
</div>

<div class="form-group">
  <label for="confirmPassword">Please confirm your new password</label>
  <input type="password" class="form-control" id="confirmPassword" placeholder="Password" v-model="confirmPassword" v-bind:disabled="newPassword.length === 0 ? true : false">
</div>

Solution 6:

You may make a computed property and enable/disable any form type according to its value.

<template>
    <button class="btn btn-default" :disabled="clickable">Click me</button>
</template>
<script>
     export default{
          computed: {
              clickable() {
                  // if something
                  return true;
              }
          }
     }
</script>