Question

我试图通过v-model多次设置 inline Vue CKEDITOR 4组件的内容。我的问题是，在用户在编辑器中键入文本之前，这一直有效。之后，我传递给v-model的所有内容都会被用户键入的内容覆盖。

为进一步澄清，我定义了使用的步骤和代码：

复制步骤：

通过v-model明确设置编辑器值'aaa'。（非用户更改）
在编辑器中键入“ bbb”（以便我们拥有“ aaabbb”）（用户更改）
通过v-model明确设置编辑器值“ ccc”。（非用户更改）

预期行为：

已设置并显示“ ccc”值。

实际行为：

在编辑器中设置了“ ccc”值。
已设置“ 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"/>

Vue内联CKEDITOR 4内容未更新

1 个答案: