How to disable input conditionally in vue js

Question

I have an input    lt input type  text  id  name  class  form-control  name  name   v-model  form name   disabled  validated        disabled  gt    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     lt input type  text  id  name  class  form-control  name  name   v-model  form name   disabled  validated        disabled  gt    Doing this always disabled the input  no matter I have 0 or 1 in  the database     lt input type  text  id  name  class  form-control  name  name   v-model  form name   disabled  validated   disabled       gt

User · Answer

Try this    lt div id  app  gt     lt p gt       lt label for  terms  gt         lt input id  terms  type  checkbox  v-model  terms    gt  Click me to enable      lt  label gt     lt  p gt     lt input  disabled  isDisabled  gt  lt  input gt   lt  div gt    vue js  new Vue     el    app     data        terms  false        computed        isDisabled  function            return  this terms

User · Answer

This will also work  lt input type  quot text quot  id  quot name quot  class  quot form-control quot  name  quot name quot   v-model  quot form name quot   disabled  quot  validated quot  gt

User · Answer

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    lt input type  text  id  name  class  form-control  name  name  v-model  form name   disabled  validated   false   true  gt    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     lt h3 gt Change Your Password lt  h3 gt   lt div class  form-group  gt     lt label for  newPassword  gt Please choose a new password lt  label gt     lt input type  password  class  form-control  id  newPassword  placeholder  Password  v-model  newPassword  gt   lt  div gt    lt div class  form-group  gt     lt label for  confirmPassword  gt Please confirm your new password lt  label gt     lt input type  password  class  form-control  id  confirmPassword  placeholder  Password  v-model  confirmPassword  v-bind disabled  newPassword length     0   true   false  gt   lt  div gt

User · Answer

You may make a computed property and enable disable any form type according to its value    lt template gt       lt button class  btn btn-default   disabled  clickable  gt Click me lt  button gt   lt  template gt   lt script gt       export default            computed                  clickable                          if something                   return true                                      lt  script gt

User · Answer

Your disabled attribute requires a boolean value    lt input  disabled  validated    gt   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   lt input  disabled    validated    gt   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  lt input  disabled     validated   gt  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

User · Answer

Not difficult  check this    lt button  click  disabled    disabled  gt Toggle Enable lt  button gt   lt input type  text  id  name  class  form-control  name  name   v-model  form name   disabled  disabled  gt    jsfiddle

User · Answer

Can use this add condition      lt el-form-item  label  Amount      style  width 100     gt               lt template slot-scope  scoped  gt               lt el-input-number v-model  listQuery refAmount   disabled   rowData status     1       true   gt  lt  el-input-number gt               lt  template gt             lt  el-form-item gt

User · Answer

Bear in mind that ES6 Sets Maps don t appear to be reactive as far as i can tell  at time of writing

User · Answer

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     lt input type  text   disabled  validated    1  gt    Here is an example    x000D   x000D  var app   new Vue   x000D    el    app   x000D   x000D    data    x000D      disabled  0  x000D       x000D       x000D   lt script src  https   cdnjs cloudflare com ajax libs vue 2 5 17 vue js  gt  lt  script gt  x000D   lt div id  app  gt  x000D     lt button  click  disabled    disabled   1    2  gt Toggle Enable lt  button gt  x000D     lt input type  text   disabled  disabled    1  gt  x000D       x000D     lt pre gt     data    lt  pre gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

To toggle the input s disabled attribute was surprisingly complex   The issue for me was twofold    1   Remember  the input s  disabled  attribute is NOT a Boolean attribute  The mere presence of the attribute means that the input is disabled   However  the Vue js creators have prepared this    https   vuejs org v2 guide syntax html Attributes    Thanks to  connexo for this    How to add disabled attribute in input text in vuejs     2  In addition  there was a DOM timing re-rendering issue that I was having   The DOM was not updating when I tried to toggle back   Upon certain situations   the component will not re-render immediately  It will update in the next  tick     From Vue js docs  https   vuejs org v2 guide reactivity html  The solution was to use   this  nextTick     gt       this disableInputBool   true      Fuller example workflow    lt div  click  allowInputOverwrite  gt       lt input         type  text           disabled  disableInputBool  gt   lt  div gt    lt button  click  disallowInputOverwrite  gt      press me  do stuff in method  then disable input bool again   lt  button gt    lt script gt   export default     data         return         disableInputBool  true              methods        allowInputOverwrite          this disableInputBool   false            disallowInputOverwrite             accomplish other stuff here        this  nextTick     gt           this disableInputBool   true                        lt  script gt

User · Answer

you could have a computed property that returns a boolean dependent on whatever criteria you need    lt input type  text   disabled isDisabled gt    then put your logic in a computed property     computed      isDisabled            evaluate whatever you need to determine disabled here        return this form validated

[javascript] How to disable input conditionally in vue.js

Examples related to javascript

Examples related to html

Examples related to forms

Examples related to vue.js