Bootstrap-Vue - input with HTML

Question

I am trying to put some HTML (even <b> tags) in Bootstrap-Vue Input fields.

    <template>
      <b-form-input></b-form-input>
      <datalist id="my-list-id">
        <option v-for="size in sizes">{{ size }}</option>
      </datalist>
    </template>

...
new Vue({
    el: '#vue',
    data: {
        sizes: ['Manual Option', '<b>bold</b>first', 'Medium', 'Large', 'Extra Large'],

However, I was unable to find out how to use the HTML members, instead of plain-text members in the selection?

Troy Morehouse · Accepted Answer · 2020-04-12 23:48:41Z

2

While not recommended due to possible Cross Site Scripting (XSS) attacks, you can use v-html to place HTML content inside elements (just make sure it is content that you provide and not users)

  <template>
    <div>
      <b-form-input list="my-list-id"></b-form-input>
      <datalist id="my-list-id">
        <option v-for="size in sizes" v-html="size"></option>
      </datalist>
    </div>
  </template>

Note that the HTML will not show in the <b-form-input>, as native <input> elements do not support HTML content.

edited Apr 12, 2020 at 23:48

answered Apr 12, 2020 at 22:09

Troy Morehouse

5,4451 gold badge30 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

T.Todua Over a year ago

Well, so actually it's not possible to have it as other "combo box" extensions offer to have i.e. image + text in the chosen input field.

T.Todua Over a year ago

many thanks for noting that to me. As I've read about Vulnerabilities, and I wouldnt directly render any user-content without sanitization from backend.

Collectives™ on Stack Overflow

Bootstrap-Vue - input with HTML

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related