Topic: How to add some HTML to mdb-input label?
Hi,
I wondered if there was a way to add some html in an mdb-input label?
For instance to add a required mark:
<mdb-input v-model="name" label="Your name<sup class=\"text-danger\">*</sup>" icon="user" group type="text" />
Of course this code won't work. Any idea?
It doesn't work, because the prop's value is rendered with interpolation, not the v-html directive. As it's not standard behaviour, you need to use a walkaround:
<mdb-input type="text" label="" v-model="inputValue" ref="customLabelInput"/>
mounted() {
const [ label] = this.$refs.customLabelInput.$el.getElementsByTagName('label');
label.innerHTML = `Your name<sup class="text-danger">*</sup>`
}
Best regards, Magdalena
Thanks, it works fine.
As all my fields are required I ended with a similar solution with a loop:
mounted() {
const labels = this.$el.getElementsByTagName('label');
for (let item of labels) {
item.innerHTML += `<sup class="text-danger ml-1">*</sup>`
}
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Free
- Premium support: No
- Technology: MDB Vue
- MDB Version: 6.7.1
- Device: any
- Browser: any
- OS: any
- Provided sample code: No
- Provided link: No