How to add some HTML to mdb-input label?


Topic: How to add some HTML to mdb-input label?

Gilles Migliori asked 2 months ago

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?


Magdalena Dembna staff premium answered 2 months ago

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

Please insert min. 20 characters.
Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: Vue
  • MDB Version: 6.7.1
  • Device: any
  • Browser: any
  • OS: any
  • Provided sample code: No
  • Provided link: No