Bootstrap - Vue - ввод с HTML - PullRequest
Новая
       12

Bootstrap - Vue - ввод с HTML

0 голосов
/ 12 апреля 2020

Я пытаюсь поместить несколько HTML (даже <b> тегов) в Bootstrap - Vue Input полей. 

    <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'],

enter image description here

Однако мне не удалось выяснить, как использовать элементы HTML вместо элементов с открытым текстом в выделении

1 Ответ

1 голос
/ 13 апреля 2020

Хотя это и не рекомендуется из-за возможных атак на межсайтовый скриптинг (XSS), вы можете использовать v-html для размещения HTML контента внутри элементов (просто убедитесь, что это контент, который вы предоставляют и не пользователи) 

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

Обратите внимание, что HTML не будет отображаться в <b-form-input>, поскольку собственные элементы <input> не поддерживают содержимое HTML.

...