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?
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
}
}