vue.js - 在 Vue 中显示 DocumentFragment

Question

我正在使用一个库(prosemirror)，它从数据库获取的 json 中为我提供一个 DocumentFragment。现在我想在我的组件中显示它。如何？两个小时的谷歌搜索没有给我带来任何结果。

  resolveContent: function () {
    let contentNode = schema.nodeFromJSON(content)
    let fragment = DOMSerializer.fromSchema(schema).serializeFragment(contentNode.content)
    return fragment
  }

在我的组件中使用它，例如

  p(v-html="resolveContent()")

或

  p {{resolveContent()}}

打印

  [object DocumentFragment]

Answer 1

处理DocumentFragment在 Vue.js 中，您需要等到 Vue 的 mounted钩子(Hook)起火。我将创建一个包装组件，它“渲染”一个空的 <div/> 。然后，连接到 mounted并使用标准 DOM 命令插入片段(例如 Node.appendChild() )

const FragmentBootstrapper = Vue.extend({
  mounted() {
    const fragment = resolveContent()

    this.$el.appendChild(fragment)
  },
  render(h) {
    return h("div") // becomes `this.$el`
  }
}

一开始这可能会感觉很奇怪，但是当您认为 Vue 是一个渲染层抽象时，它就最有意义了。因此，在它自己的渲染钩子(Hook)期间，它期望只处理它自己的VDOM。它提供mounted钩子(Hook)以支持各种用例，即这个。