Vue содержание встроенного CKEDITOR 4 не обновляется

Question

Я пытаюсь установить содержимое компонента inline Vue CKEDITOR 4 через v-model, несколько раз. Моя проблема в том, что это работает, пока пользователь не введет текст в редакторе. После этого все, что я передаю v-model, перезаписывается набранным пользователем текстом.

Для дальнейшего разъяснения я определил шаги и код, который я использую:

Шаги для Воспроизведите:

1. Явно установите значение редактора 'aaa' через v-модель. (изменение не для пользователя)
2. Введите 'bbb' в редакторе (чтобы у нас было 'aaabbb') (изменение для пользователя)
3. Явно установите значение редактора 'ccc' через v- модель. (изменение не для пользователя)

Ожидаемое поведение:

• Значение 'ccc' установлено и показано.

Фактическое поведение:

1. В редакторе установлено значение 'ccc'.
2. Установлено значение 'aaabbb' (перезаписывается значение в 1.) и показано.

Код:

<template>
    <div>
        <ckeditor
            v-model="editorData"
            type="inline"
        />
    </div>
</template>

export default class EditorWrapper extends Vue {
    // Vue component property that contains data sent to editor in steps 1. and 3.
    @Prop({ type: String, default: '' })
    externalData!: string;

    // Vue data variable that is bound 2-way to the editor
    editorData: string;

    // watch for changes to the 'externalData' property
    @Watch('externalData')
    onPropertyChange(externalData) {
        // explicitly set the editor text when not changed by the user (steps 1. and 3.)
        this.editorData = externalData;
    }

    // watch for changes to the editor 'v-model' data (user and non-user changes)
    @Watch('editorData')
    onEditorDataChange(data) {
        // this outputs the editor text - 'ccc', then 'aaabbb' - which is wrong
        console.log(data);
    }

}

Answer 1

Вам просто нужно использовать вычислитель для двухсторонней привязки данных:

https://jsfiddle.net/ellisdod/18ybd6o5/

@Prop({ type: String, default: '' })
    value: string;

get _value() {
    return this.value
}

set _value(val) {
    this.$emit('input', val)
}

<ckeditor
    v-model="_value"
    type="inline"
/>

Затем вы можете обновить у твоих родителей:

<editor-wrapper v-model="updatableValue"/>