I am using tiptap . How to make a preview from child component to parent component

Question

Below is my code.

parent.vue

<client-only>
  <EditorTiptap v-model="content" />
</client-only>

tiptap.vue

<div class="editor-panel">
  <editor-content :editor="editor" />
</div>

and

computed: {
  html () {
    if (!this.editor) return ''
    return this.editor.getHTML()
  },
}

In such a structure, how can I send the content input value of the child component to the parent component?

In order to implement the preview function in the parent component, the content of the child component must be fetched in real time.

I couldn't find a way to do anything with the html of computed .

Please tell me how to implement editor input of child component (tiptap.vue) as preview in parent component.

score 2 · Accepted Answer · edited Jul 15 '22 at 23:11

2

You could add a watcher to your html computed property to $emit its content to parent.

watch: {
    html: function (val) {
      this.$emit('onHtmlChanged', html)
    },
}

Then your parent can listen to @onHtmlChanged :

<client-only>
  <EditorTiptap v-model="content" @onHtmlChanged="doSomething" />
</client-only>

NOTE : It might be recommended that you debounce your event to prevent emitting a change at each keystroke

edited Jul 15 '22 at 23:11

tony19

answered Oct 01 '21 at 08:35

Pierre_T

The problem I had been struggling with in two days was solved at once. This is the answer that beat my Googling time. thank you. – bamgae Oct 01 '21 at 09:47

1 Answers1