Capturing html wrapped by the component to set a data value in vue.js

Question

I am working on a tiptap based component. I want to take the html that is within the component tags

<vue-wysiwyg>
    <p>Hey, this is some test text.</p>
    <p>I should end up in editor.content</p>
</vue-wysiwyg>

And have the editor.content data for my component be given it.

export default {
  data() {
    return {
      editor: new Editor({
        content: '',
      }),
    }
  },
}

I thought about slots but that just passes through html, it doesn't capture it.

I think what you want is pretty much the same as this: https://stackoverflow.com/a/58057169/1850609 I go into the caveats of what you want there, as well as what you can do about it. — acdcjunior, Oct 06 '19 at 03:47

score 2 · Answer 1 · answered Oct 06 '19 at 07:55

I think the slots are the way to go, but since they contain vdom objects we have to use vue to convert it into html. The following should work:

computed: {
    html(){

        return new Vue({ 
                render: h => h('div', {}, this.$slots.default)
            })
            .$mount().$el.innerHTML
    } 
}

We are creating simple component instance that has only a render function and than we $mount it to generate the DOM and than we extract the innerHTML from the root element.

NOTE: You would have to import Vue in this file

score 1 · Answer 2 · answered Oct 06 '19 at 03:54

You can give the component a ref and access its inner HTML and assign it editor.content

<vue-wysiwyg ref="wysiwyg">
    <p>Hey, this is some test text.</p>
    <p>I should end up in editor.content</p>
</vue-wysiwyg>

And then in the mounted life cycle hook

export default {
  data() {
    return {
      editor: new Editor({
        content: '',
      }),
    }
  },
  mounted() {
    this.editor.content = this.$refs.wysiwyg.$el.innerHTML;
  }
}

Like this sandbox

Hope this helps

Capturing html wrapped by the component to set a data value in vue.js

2 Answers2