How to conditionally disable input in 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 as boolean , it can be 0 or 1 , but no matter what value is stored in the database, my input is always disabled.

I need input to be disabled if false , otherwise it must be enabled and editable.

Update:

This always allows you to enter data (regardless of whether 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 turned off the input (regardless of whether 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 : ''"> 

Answer 1

To remove a disconnected prop, you must set its value to false . This should be a boolean for false , not the string 'false' .

So, if the value for validated is either 1 or 0, then conditionally set disabled prop based on this value. For example:.

 <input type="text" :disabled="validated == 1"> 

Here is an example .

Answer 2

you can have a computed property that returns a boolean depending 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; } } 

Answer 3

Not difficult, check it out.

 <button @click="disabled = !disabled">Toggle Enable</button> <input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="disabled"> 

jsfiddle

Answer 4

Your disabled attribute requires a boolean:

<input :disabled="validated"/>

Notice how I checked only if validated - this should work, since 0 is falsey ... for example

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

1 is in fact considered to be true

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

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

you do not trust me? go to the console and type !!0 or !!1 :-)

Also, to make sure your numbers 1 or 0 definitely designated as a number, not the string '1' or '0' expect the value you check with + for example, <input :disabled="!!+validated"/> this turns a string of numbers into a number, e.g.

+1 = 1 +'1' = 1 As David Morrow said above, you can put your conditional logic in a method - this gives you more readable code - just return the condition you want to check from the method.

Answer 5

You can manipulate the :disabled attribute in vue.js.

It will take a logical value, if it is true , then the input is disabled, otherwise it will be turned on ...

Something like structured as shown 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 disable input elements using a JavaScript expression

You can conditionally disable input elements embedded in a JavaScript expression. This compact approach provides a quick way to apply simple conditional logic. For example, if you only need to check the password length, you might 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> 

Answer 6

You can create a computed property and enable / disable any type of form 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> 

Answer 7

You can use this additional condition.

  <el-form-item :label="Amount ($)" style="width:100%" > <template slot-scope="scoped"> <el-input-number v-model="listQuery.refAmount" :disabled="(rowData.status !== 1 ) === true" ></el-input-number> </template> </el-form-item> 

Answer 8

Switching the disabled input attribute was surprisingly difficult. The problem for me was twofold:

(1) Remember: the input attribute "disabled" is NOT a logical attribute.
The mere presence of an attribute means that input is disabled.

However, the creators of Vue.js prepared this ... https://vuejs.org/v2/guide/syntax.html#Attributes

(Thanks to @connexo for this ... How do I add a disabled attribute to input in vuejs? )

(2) Also, I had a problem with re-rendering the DOM. The DOM did not update when I tried to go back.

In certain situations, "the component will not be rendered immediately. It will be updated in the next tick."

From the Vue.js docs: https://vuejs.org/v2/guide/reactivity.html.

The solution was to use:

 this.$nextTick(()=>{ this.disableInputBool = true }) 

A more complete workflow example:

 <div @click="allowInputOverwrite"> <input type="text" :disabled="disableInputBool"> </div> <button @click="disallowInputOverwrite"> press me (do stuff in method, then disable input bool again) </button> <script> export default { data() { return { disableInputBool: true } }, methods: { allowInputOverwrite(){ this.disableInputBool = false }, disallowInputOverwrite(){ // accomplish other stuff here. this.$nextTick(()=>{ this.disableInputBool = true }) } } } </script> 

Answer 9

Try this

  <div id="app"> <p> <label for='terms'> <input id='terms' type='checkbox' v-model='terms' /> Click me to enable </label> </p> <input :disabled='isDisabled'></input> </div> 

Vue js

 new Vue({ el: '#app', data: { terms: false }, computed: { isDisabled: function(){ return !this.terms; } } }) 

Answer 10

Keep in mind that ES6 kits / cards, as far as I can tell, do not seem reactive at the time of writing.