I need to assign the value of the content data from another component to the this.newTutorial.content push function. I successfully obtained the data, but now I am facing an issue with assigning it to my v-model. It's like transferring data from one v-model to another v-model. I attempted to do this in the created function:
this.newTutorial.content = this.content;Here is the code snippet:
<style scoped>
img.preview {
width:200px;
}
.v-btn {
height: 50px !important;
min-width: 50px !important;
}
</style>
<template>
<div id="app">
<v-dialog v-model="dialog" width="500">
<template v-slot:activator="{ on, attrs }">
<v-btn style="z-index:9;" color="blue lighten-1" dark rounded v-bind="attrs" v-on="on" fixed left>
<v-tooltip right >
<template v-slot:activator="{ on, attrs }">
<v-icon fab dark v-bind="attrs" v-on="on">
mdi-plus
</v-icon>
</template>
<img class="monk-ico" src="https://celfonica.s3-us-west-1.amazonaws.com/logos/monk-circle+50px.png">
<span style="display:inline;">
Add Tutorial
</span>
</v-tooltip>
</v-btn>
</template>
...
Then my component code for importing the content data:
<script>
export default {
name: 'EditorContent',
props: {
editor: {
default: null,
type: Object
},
value: {
default: "",
type: String
}
},
watch: {
editor: {
immediate: true,
handler(editor) {
if (!editor || !editor.element) return;
this.editor.setContent(this.value);
this.editor.on("update", ({ getHTML }) => {
this.$emit("input", getHTML());
});
this.$nextTick(() => {
this.$el.appendChild(editor.element.firstChild);
editor.setParentComponent(this);
});
}
},
value: {
handler(value) {
this.editor.setContent(value);
}
}
},
...
VUE data:
https://i.sstatic.net/CSDYm.png
Console error: