vue.js - 在 Vue 中显示 DocumentFragment

Question

我正在使用一个库（prosemirror），它为我提供了一个从数据库中获取的 json 文件片段。现在我想在我的组件中显示它。如何？两个小时的谷歌搜索没有给我任何东西。

  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/>. 然后，使用标准 DOM 命令（例如Node.appendChild()）连接mounted并插入片段

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

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

起初这可能会觉得很奇怪，但当你考虑到 Vue 是在渲染层抽象时，这才最有意义。因此，在它自己的渲染钩子中，它期望只处理它自己的 VDOM。它提供了mounted钩子以支持各种用例，即这个。