javascript – VueJS conditionally add an attribute for an element-ThrowExceptions

Exception or error:

In VueJS we can add or remove a DOM element using v-if:

<button v-if="isRequired">Important Button</button>

but is there a way to add / remove attributes of a dom element eg for the following conditionally set the required attribute:

Username: <input type="text" name="username" required>

by something similar to:

Username: <input type="text" name="username" v-if="name.required" required>

Any ideas?

How to solve:

Try:

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

###

Simplest form:

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

###

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

###

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.

###

In html use

<input :required="condition" />

And define in data property like

data () {
   return {
      condition: false
   }
}

Leave a Reply

Your email address will not be published. Required fields are marked *