在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钩子触发。我将创建一个包装器组件，它只是一个空的<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正在呈现层抽象时，这才是最有意义的。因此，在自己的呈现钩子中，它希望只处理自己的VDOM。它提供mounted钩子以支持各种用例，即这个用例。