Внедрить или инициализировать компоненты Vue в сгенерированном HTML

Question

Я использую редактор статей WYSIWYG, который генерирует HTML-код для статей, которые я сохраняю в базе данных и затем показываю пользователю.

Проблема в том, что мне нужно вставить компоненты Vue в этот автоматически сгенерированный HTML-код для отображения динамических продуктов. Я могу сделать пользовательский блок в редакторе, который добавляет HTML, но я хочу, чтобы он работал как компонент Vue, который обновляет описание продукта непосредственно из базы данных.

Теперь я думаю о том, чтобы добавить кнопку, которая добавляет div со свойством data идентификатора продукта. Затем я могу заменить этот div в коде компонентом Vue с тем же идентификатором, введя компонент.

У меня была еще одна идея: просто добавить такие компоненты, как <product id="1031"/> как обычный HTML, а затем попробуйте скомпилировать всю статью HTML с Vue, но я прочитал, что v-html директива только компилирует код как обычный HTML.

Это возможно? Или есть идеи получше?

Answer 1

Если вы используете полную сборку Vue (а не сборку только во время выполнения), вы можете инициализировать новый экземпляр Vue и смонтировать его где угодно, передать данные и т. Д.

// Main app        
new Vue({
  el: '#app',
  data: {
    stuff: 'inserted message'
  },
  methods: {
    clicked() {
      // Add new
      new Vue({
        template: `<h1 style="color: red;">{{ message }}</h1>`,
        parent: this,
        data: {
          message: 'new message'
        }
      }).$mount(document.getElementById('more'))
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
<div id="app">
  There are some things here before like {{ stuff }}
  but when you press <button @click="clicked()">add more</button>
  you can add more things here:
  <div id="more"></div>
</div>