передать неэкранированный HTML в строку vue - PullRequest
Новая
       27

передать неэкранированный HTML в строку vue

0 голосов
/ 28 мая 2019

Я пытаюсь заменить существующий элемент компонентом, но использую данные существующего элемента в новом компоненте.

Как бы вы передали существующий элемент в слот новых компонентов, сохранив исходные элементы без экранированной разметки HTML? 

document.addEventListener("DOMContentLoaded", function() {
  let ExampleComponent = {
    data: function() {
      return {};
    },
    props: ["type"],
    template: `
            <div>
              <span :class="type">Decoration</span>
              <slot name="myslot">default content</slot>
            </div>
            `
  };

  new Vue({
    el: "#app",
    components: {
      example: ExampleComponent
    },
    data() {
      return {};
    },
    methods: {
      addExampleComponent: function() {
        let target = this.$el.querySelector(".example-target");

        let ComponentClass = Vue.extend(ExampleComponent);
        let instance = new ComponentClass({
          propsData: { type: "primary" }
        });
        instance.$slots.myslot = target.outerHTML;
        instance.$mount();

        target.replaceWith(instance.$el);
      }
    }
  });
});
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

  <div id="app">
    <div class="example-target">replace me!</div>
    <div>
      <button v-on:click="addExampleComponent">Replace</button>
    </div>
  </div>

В настоящее время replace me! в элементе "example-target" буквально отображает Decoration <div class="example-target">replace me!</div> после нажатия кнопки «Заменить». Я пытаюсь сохранить HTML-код без изменений.

1 Ответ

1 голос
/ 28 мая 2019

Попробуйте использовать директиву v: html . 

    document.addEventListener('DOMContentLoaded', function () {
        let ExampleComponent = {
            data: function () { return {} },
            props: ['type'],
            template: `
          <div>
            <span :class="type">Decoration</span>
            <slot name="myslot">default content</slot>
          </div>
        `
        }

        new Vue({
            el: '#app',
            components: {
                'example': ExampleComponent
            },
            data() { return {} },
            computed: {
                addExampleComponent: function () {
                    let target = this.$el.querySelector('.example-target')

                    let ComponentClass = Vue.extend(ExampleComponent)
                    let instance = new ComponentClass({
                        propsData: { type: 'primary' }
                    })
                    instance.$slots.myslot = target.outerHTML
                    instance.$mount()

                    return instance.$options.template
                }
            }
        })
    })
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.10/vue.js"></script>
<body>
    <div id="app">
        <div class="example-target">replace me!</div>
        <div>
            <div v-html="addExampleComponent"></div>
        </div>
    </div>
</body>
...