Display a DocumentFragment in Vue

Question

I am using a library (prosemirror) that gives me a DocumentFragment out of json I get from the database. Now I want to display it in my component. How? Two hours of googling gave me nothing.

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

Using this in my component like

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

or

  p {{resolveContent()}}

Prints

  [object DocumentFragment]

matpie · Answer 1 · 2020-07-13T16:46:30.313

To handle DocumentFragment within Vue.js, you will need to wait until Vue's mounted hook fires. I would create a wrapper component which "renders" simply an empty <div/>. Then, hook in to mounted and insert the fragment using standard DOM commands (eg. Node.appendChild())

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

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

This may feel weird at first, but it makes the most sense when you consider that Vue is is rendering layer abstraction. Thus, it during its own rendering hook, it expects to only deal with its own VDOM. It provides the mounted hook in order to support various use-cases, namely this one.

Display a DocumentFragment in Vue

1 Answers1