How to disable input conditionally in vue.js

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

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>

Disable input conditionally in Vue.js, 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. In this tutorial, you’ll learn how to disable input field conditionally in Vue.js. For example, we’ve got a form that asks the user to verify the email address. If entered correctly, this form becomes disabled and a feedback message pops up (I literally just came up with this example).

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

How to disable Input conditionally in Vue.js, This example shows you how to disable the box conditionally in vue.js. Explanation We can disable the box by passing a boolean value . In… 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. Here is an example.

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

Conditionally enable/disable HTML attributes in Vue.js, In Vue.js you can enable or disable an HTML button or form field, make it required or optional using multiple ways. Using computed property. Vue.js enable disable input field It is very simple to enable disable form input field. Here in this article we are going to create one input field and submit button to implement this functionality. Here in this article we are going to create one input field and submit button to implement this functionality.

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.

How to disable input conditionally in Vue.js – Renat Galyamov, In this tutorial, you'll learn how to disable input field conditionally in Vue.js. For example, we've got a form that asks the user to verify the email. 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.

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>

How to enabled a disabled button when there are texts in the input , How to enabled a disabled button when there are texts in the input I made the “​add name” button disabled by default, and I want to enable it once users <​script src="https://unpkg.com/vue"></script> <div id="app"> <ul> <li v-for="x in names" Powered by Discourse, best viewed with JavaScript enabled. VueJS conditionally Enable Disable button There are the Following The simple About VueJS conditionally Enable Disable button Full Information With Example and source code. As I will cover this Post with live Working example to develop Vue JS button enable / disable , so the Enable/Disable button with Vue for this example is following below.

How to conditionally disable a button in Vue v-for loop, I have the following code, every time the condition is true, the disabled is affecting all of the buttons in all the items. I have searched and  Vue.js enable disable button - We can use disable attribute to enable and disable the button conditionally. Here in this tutorial, we are going to explain how you can use this attribute in vuejs to make a button enabled or disabled

How to disable button, form> <input type='text' ref='todo_input'> <button @click.prevent='getInputValue()'​>Add</button> </form> methods: { getInputValue  Teams. Q&A for Work. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.

Vue.js enable disable input field, Vue.js enable disable input field - It is very simple to enable disable form input field. Here in this article we are going to create one input field  Teams. Q&A for Work. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.

Comments
  • in my db, I have 0 and 1 stored for true and false, playing with your fiddle, 0 and 1 keeps it disabled
  • do I need to edit my db structure make it exactly true and false?
  • No, just set the value to either true or false depending on the value of the item in your db
  • just do : :disabled="validated" As long as validated is True/false or 0/1, Javascript will know.
  • @gk the code that was in the jsfiddle is now in the answer
  • This worked for me, no quotes needed, in my case calling isDisabled() within the HTML, defined in Data.
  • I like this definitely much neater
  • this results with an error disabled = !disabled
  • you component need data attrs with disabled: false or boolean type.
  • This is the easiest answer to read and to apply to one's use case, in my opinion.
  • this was the only thing that worked for me. to move the method to computed instead of methods. thanks!
  • ++ (However, the Vue.js creators have prepared this... vuejs.org/v2/guide/syntax.html#Attributes)