javascript - VueJS conditionally add an attribute for an element

ID : 20430

viewed : 35

Tags : javascriptvue.jsvuejs2javascript

Top 5 Answer for javascript - VueJS conditionally add an attribute for an element

vote vote



<input :required="test ? true : false"> 

Update: It has changed in Vue 3, see this answer

vote vote


Simplest form:

<input :required="test">   // if true <input :required="!test">  // if false <input :required="!!test"> // test ? true : false 
vote vote


Conditional rendering of attributes changed in Vue 3. To omit an attribute use null or undefined.

Vue 2:

<div :attr="false"> Result: <div>  <div :attr="null"> Result: <div> 

Vue 3:

<div :attr="false"> Result: <div attr="false">  <div :attr="null"> Result: <div> 
vote vote


<input :required="condition">

You don't need <input :required="test ? true : false"> 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 <input :required="condition">

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.
  <input :required="!!condition">

vote vote


You can pass boolean by coercing it, put !! before the variable.

let isRequired = '' || null || undefined <input :required="!!isRequired"> // 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 <any-component   :my-prop="isValue ? 'Hey I am when the value exist' : undefined" /> 


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 <any-component   :my-prop="isValue ? 'Hey I am when the value exist': false" /> 

In the above case, what I expected is not having my-prop get passed to the child component - <any-conponent/> I don't see the prop in DOM but In my <any-component/> 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!

<any-component   :my-prop="isValue ? 'Hey I am when the value exist' : undefined" />   

This works and my child prop is having the default value.

Top 3 video Explaining javascript - VueJS conditionally add an attribute for an element