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">
Update: It has changed in Vue 3, see this answer https://stackoverflow.com/a/64598898
Simplest form:
<input :required="test"> // if true
<input :required="!test"> // if false
<input :required="!!test"> // test ? true : false
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>