在生成的 HTML 中注入或初始化 Vue 组件

Question

我使用一个 WYSIWYG article editor 为我保存在数据库中的文章生成一些 HTML 并稍后显示给用户。

问题是我需要将 Vue 组件插入到这个自动生成的 HTML 中以显示动态产品。我可以在添加 HTML 的编辑器中创建自定义块，但我希望它作为 Vue 组件工作，直接从数据库更新产品描述。

我现在想的是添加一个按钮，添加一个 div 和产品 ID 的数据属性。然后我可以通过注入组件将代码中的 div 替换为具有相同 ID 的 Vue 组件。

我的另一个想法是简单地添加像 <product id="1031"/> 这样的组件作为普通 html 然后尝试用 Vue 编译整篇文章 HTML 但我读到 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>

在生成的 HTML 中注入或初始化 Vue 组件

Inject or Initialize Vue components in generated HTML

javascript

html

vue.js

trumbowyg