How to emit multiple parameter in vue-quill editor?

Question

I am using vue-quill editor and trying to use it with a custom component. Here is my code.

WysiwygInput.vue

<template>
  <div class="my-3">
    <quill-editor
      :options="{
        placeholder: placeholder,
      }"
      v-on:change="($event) => $emit('change', $event.text)"
    ></quill-editor>
  </div>
</template>

Create.vue

<wysiwyg-input @change="setField" placeholder="Post Content" />

I want to access the quill-editor value with an extra parameter, something like this.

<wysiwyg-input @change="setField($event.text, 'content')" placeholder="Post Content" />

So what to change on WysiwygInput.vue ? Thanks is advance.

Codesandbox link: https://codesandbox.io/s/mystifying-benz-w8wgu?file=/src/FormFields.vue

Answer 1

You could emit many params using $emit method :

 v-on:change="($event) => $emit('change', $event.text,param2,param3)"

and in parent component add the handler like :

<wysiwyg-input @change="setField" placeholder="Post Content" />

...
setField(text,param2,param3){
 ...
}

if you want to add parameter to the emitted event handler in parent component you should add inline handler like :

<wysiwyg-input @change="(text)=>setField(text, 'content')" placeholder="Post Content" />