Disable input conditionally (Vue.js)

Question

I have an input:

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

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):

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

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

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

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.

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>

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

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 0 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 0 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.

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>

View more solutions

Comments

[Zaffar Saffee]

in my db, I have 0 and 1 stored for true and false, playing with your fiddle, 0 and 1 keeps it disabled

[Zaffar Saffee]

do I need to edit my db structure make it exactly true and false?

[asemahle]

No, just set the value to either true or false depending on the value of the item in your db

[asemahle]

I've updated to the fiddle to show how to do it with numbers

[Zaffar Saffee]

sorry, but may be its laravel, you code makes complete sense, but still, I have a boolean field set Default to 0, in database, the respective field shows as tinyint(1), changing its values from 0' to '1 doesnt change the status, no clue why

[asemahle]

Try displaying the value of your validated variable to help debug. Insert {{ typeof disabled }} {{ disabled }} above the input. It should display number 1 if the value is 1, or number 0 if the value is zero

[Zaffar Saffee]

Let us continue this discussion in chat.

[Despertaweb]

The code could be cleaner: You don't need to assign 1 or 0, just play around with true/false like : @Sebastiao Marcos check this out : jsfiddle.net/eo8kd2wd/13

[Leo]

This worked for me, no quotes needed, in my case calling isDisabled() within the HTML, defined in Data.

[Despertaweb]

just do : :disabled="validated" As long as validated is True/false or 0/1, Javascript will know.

[Ferrybig]

@Despertaweb Not always, if the database provides the 1/0 as a string because of a bad translation layer, "0" is just true, unless you cast it to a number first

[Despertaweb]

Then just make sure to get the type you want. ;)

[jokab]

this was the only thing that worked for me. to move the method to computed instead of methods. thanks!

[gk.]

broken jsfiddle link

[asemahle]

@gk the code that was in the jsfiddle is now in the answer

[Rytis Dereskevicius]

++ (However, the Vue.js creators have prepared this... vuejs.org/v2/guide/syntax.html#Attributes)

[habib]

Don't forget to put function parenthesis <input :disabled='isDisabled()'></input>

[Zilog80]

You should precise in what way your answer enhances existing answers like this one and this one. The template way seems useful here, you should give more details in your answer.