VueJS conditionally add an attribute for an element

Question

In VueJS we can add or remove a DOM element using v-if    lt button v-if  isRequired  gt Important Button lt  button gt    but is there a way to add   remove attributes of a dom element eg for the following conditionally set the required attribute   Username   lt input type  text  name  username  required gt    by something similar to   Username   lt input type  text  name  username  v-if  name required  required gt    Any ideas

User · Answer

You can pass boolean by coercing it  put    before the variable  let isRequired         null    undefined  lt input  required  quot   isRequired quot  gt     it will coerce value to respective boolean   But I would like to pull your attention for the following case where the receiving component has defined type for props  In that case  if isRequired has defined type to be string then passing boolean make it type check fails and you will get Vue warning  To fix that you may want to avoid passing that prop  so just put undefined fallback and the prop will not sent to component let isValue   false  lt any-component    my-prop  quot isValue    Hey I am when the value exist    undefined quot    gt   Explanation I have been through the same problem  and tried above solutions    Yes  I don t see the prop but that actually does not fulfils what required here  My problem - let isValid   false  lt any-component    my-prop  quot isValue    Hey I am when the value exist   false quot    gt   In the above case  what I expected is not having my-prop get passed to the child component -  lt any-conponent  gt  I don t see the prop in DOM but In my  lt any-component  gt  component  an error pops out of prop type check failure  As in the child component  I am expecting my-prop to be a String but it is boolean  myProp      type  String   required  false   default        Which means that child component did receive the prop even if it is false  Tweak here is to let the child component to take the default-value and also skip the check  Passed undefined works though   lt any-component    my-prop  quot isValue    Hey I am when the value exist    undefined quot    gt     This works and my child prop is having the default value

User · Answer

It s notable to understand that if you d like to conditionally add attributes you can also add a dynamic declaration   lt input v-bind  quot attrs quot    gt   where attrs is declared as an object  data         return           attrs                required  true              type   quot text quot                     Which will result in   lt input required type  quot text quot   gt   Ideal in cases with multiple attributes

User · Answer

Simplest form    lt input  required  test  gt       if true  lt input  required   test  gt      if false  lt input  required    test  gt     test   true   false

User · Answer

Try    lt input  required  test   true   false  gt

User · Answer

Conditional rendering of attributes changed in Vue 3  To omit an attribute use null or undefined  Vue 2   lt div  attr  quot false quot  gt  Result   lt div gt    lt div  attr  quot null quot  gt  Result   lt div gt   Vue 3   lt div  attr  quot false quot  gt  Result   lt div attr  quot false quot  gt    lt div  attr  quot null quot  gt  Result   lt div gt

User · Answer

You can add colon before attribute  also can use conditions  like  lt div  class  quot current   active       quot   gt    lt button  disabled  quot InvalidForm  true   false  quot   gt   If you want to set a dynamic value like props then you also can use colon before attribute name like    lt Child  data  quot userList quot    gt

User · Answer

lt input  required  condition  gt   You don t need  lt input  required  test   true   false  gt  because if test is truthy you ll already get the required attribute  and if test is falsy you won t get the attribute  The true   false part is redundant  much like this     if  condition        return true    else       return false       or this    return condition   true   false     can  always  be replaced by    return  condition      parentheses generally not needed   The simplest way of doing this binding  then  is  lt input  required  condition  gt   Only if the test  or condition  can be misinterpreted would you need to do something else  in that case Syed s use of    does the trick    nbsp   lt input  required    condition  gt

User · Answer

In html use   lt input  required  condition    gt    And define in data property like  data         return         condition  false

[javascript] VueJS conditionally add an attribute for an element

Examples related to javascript

Examples related to vue.js

Examples related to vuejs2