Question

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

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

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

我的另一个想法是简单地添加像<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组件

1 个答案: