Within my admin application, I have a component that includes Vue 2's Quill rich editor which utilizes v-model for its data. Now, I aim to transmit this v-model from my child vue-2-editor component to the parent component. The documentation suggests creating a custom v-model in your component using props value and emitting an 'input' event with that value. However, the challenge lies in passing one v-model to another, particularly from the child to the parent component.
The text editor I am utilizing is the vue2 editor, a unique take on text editing through Vue.js and Quill: https://github.com/davidroyer/vue2-editor
This is how my component looks like :
<template>
<div style="width:auto; height:auto; display:flex; flex-direction.column;">
<button @click="editorVisible = true">Show Editor</button>
<vue-editor v-model="value" :editorToolbar="customToolbar" useCustomImageHandler @imageAdded="handleImageAdded"></vue-editor>
</div>
</template>
<!--SCRIPTS-->
<script>
import { VueEditor } from 'vue2-editor';
export default {
name: 'ADMINeditor',
props:
{
value:{ required:true, type:String }
},
data()
{
return {
editorVisible:false
}
},
methods:
{
wrote()
{
this.$emit('input', this.value);
}
}
}
</script>
<!--STYLES-->
<style scoped>
</style>
My goal is to achieve:
<admin-editor v-model="text"></admin-editor>
To dive deeper into -model within custom components, you can refer here: