html внутри VueJS Bootstrap

Question

Нужно вывести внутри поля ввода ссылку, пытаюсь сделать как-то так, но не выходит.

<template>
  <div>
        <b-form-group id="input-group-brand" label="Брэнд:" label-for="brand">
          <b-form-input id="brand" v-html="brand_a" ></b-form-input>
        </b-form-group>
  </div>
</template>

<script>
export default {
      data() {
        return {
          brand_a: "<a href="images/xxx.jpg">img</a>",
      }}
}
</script>

Answer 1

Использование директивы v-html невозможно в данном случае, так как компонент b-form-input "рендерит" обычный input:

...
 render(h) {
    return h('input', {
      ref: 'input',
      class: this.computedClass,
      attrs: this.computedAttrs,
      domProps: { value: this.localValue },
      on: this.computedListeners
    })
  }
...

, а input не поддерживает вложенный html код

Рассмотрите возможную конструкцию в следующем примере:

new Vue({
  el: "#app",
  data: {
    text: '<a href="images/xxx.jpg">img</a>'
  }
})

<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />

<!-- Load polyfills to support older browsers -->
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>

<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<!-- Load the following for BootstrapVueIcons support -->
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>

<div id="app">
  <b-container fluid>
    <b-row class="my-1">
      <b-col sm="2">
        <label for="input-none">Ссылка:</label>
      </b-col>
      <b-col sm="10">
        <b-form-input id="input-none" v-model="text"></b-form-input>
      </b-col>
    </b-row>
  </b-container>
</div>

БЛОГ НА HUSL

html внутри VueJS Bootstrap

Ответы (1 шт):