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

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


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


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


matomo