TypeError: Cannot read property 'setData' of undefined

[masoudline]

how can i save editorData as a prop in vuejs?
i have a laravel backend and i need send product->description as props to ckeditor
my code:
mounted() { if(this.mainData){ this.editorData = this.mainData } },
but i have these error:
[Vue warn]: Error in callback for watcher "value": "TypeError: Cannot read property 'setData' of undefined"

[FilipTokarski]

Hi, thanks for the report. Could you please provide some more precise steps + code to reproduce this error? Also, does this error occur only when trying to set data taken from the server, and not with other content?

[ConnorHowell]

For anyone coming across this in future; there seems to be an issue with assigning a value to ckeditor in the 'mounted' hook.
Not 100% sure on what's causing this but it seems it's trying to assign the value before the ckeditor instance has been created; a workaround is to use the following to delay the assignment:

setTimeout(() => {
    this.editorValue = 'New Value';
}, 100);

[bizsimon]

@ConnorHowell the setTimeout worked. thank you for saving me hours of frustrations.
however, the 100ms is a bit arbitrary for me. all we are doing is waiting for the editor instance to be ready. so moving the value assignment into the 'ready' event also did the same thing.

<ckeditor @ready="onEditorReady" v-model="editorValue"></ckeditor>

in methods

methods: {
    onEditorReady: function() { this.editorValue = 'New Value'; }
}

[ConnorHowell]

@bizsimon good point, guessing the permanent fix to this issue would be for the component to check the instance exists prior to assigning the value in the watcher for 'modelValue':

ckeditor5-vue/src/ckeditor.js

Lines 123 to 125 in 3ee73df

	if ( newValue !== oldValue && newValue !== this.$_lastEditorData ) {
	this.$_instance.setData( newValue );
	}

@pomek do you want a PR for this, seems like a fairly trivial fix?

[cerberos]

I have created a component that uses the CKEditor inside

<template> <ckeditor :editor="editor" v-model="editorValue" @ready="editorReady" :config="configurations" :disabled="disabled"></ckeditor> </template>

editorValue is bean updated from the watcher:
watch: { editorValue(newText) { this.$emit('input', newText) }, value(newValue){ this.editorValue = newValue } }

this was triggering the error when the component was accessed for second time so i solved it by including 2 new variables: ready and tempValue

the editorReady become:
editorReady(){ this.ready = true this.editorValue = this.tempValue }

the watcher changes to:
watch: { editorValue(newText) { this.$emit('input', newText) }, value(newValue){ if(this.ready){ this.editorValue = newValue } else { this.tempValue = newValue } } }

so instead of using a setTimeout i change the value of the ckeditor when the editor is ready. hope this will help someone