Codemirror 不会刷新文本区域的内容，直到它被单击或者如果我在设置时对内容使用 JSON.parse

Question

我正在开发一个使用 Vuejs/Nuxtjs 的 Web 应用程序，其中我有一些 textarea 由 CodeMirror 控制，用于美化目的。我面临的问题是，当 CodeMirror 的内容发生变化时，它不会反映在 CodeMirror textarea 上，除非我单击它或者如果我在设置值时使用 JSON.parse Watch。如果我点击它，它就会反映出所做的更改，并且一切正常。

以下是受 CodeMirror 控制的文本区域：

<textarea
    ref="input"
    :value="$store.state.modules.MyModules.input"
    class="form-control"
    placeholder="Input"
    spellcheck="false"
    data-gramm="false"
/>

以下是代码示例，如果使用 Vuejs Watch 函数更改值，我将内容加载到 CodeMirror：

data () {
    return {
        inputEditor: null
    }
},
watch: {
    '$store.state.modules.MyModules.input' (value) {
        if (value !== this.inputEditor.getValue()) {
            this.inputEditor.setValue(value)
        }
    }
},

mounted () {
    this.inputEditor = CodeMirror.fromTextArea(this.$refs.testInput, {
        mode: "applicaton/ld+json",
        beautify: { initialBeautify: true, autoBeautify: true },
        lineNumbers: true,
        indentWithTabs: true,
        autofocus: true,
        tabSize: 2,
        gutters: ["CodeMirror-lint-markers"],
        autoCloseBrackets: true,
        autoCloseTags: true,
        styleActiveLine: true,
        styleActiveSelected: true,
        autoRefresh: true,
    });

    // On change of  input call the function
    this.inputEditor.on("change", this.createTestData);

    // Set the height for the input CodeMirror
    this.inputEditor.setSize(null, "75vh");

    // Add the border for all the CodeMirror textarea
    for (const s of document.getElementsByClassName("CodeMirror")) {
        s.style.border = "1px solid black";
    }
  }

我发现了类似的问题并尝试了以下方法但仍然没有成功：

正在尝试刷新 watch 方法中的内容：


watch: {
    '$store.state.modules.MyModules.input' (value) {
        const vm = this
        if (value !== this.inputEditor.getValue()) {
            this.inputEditor.setValue(value)
            setTimeout(function () {
                vm.inputEditor.refresh()
            }, 1)
        }
    }
},

尝试在我的 CodeMirror 中使用 autorefresh，但这也没有用。

对我有用的是，在设置值时，我需要在 watch 方法中使用 JSON.parse。如果我这样做，那么它工作正常，但我不想这样做：

watch: {
    '$store.state.modules.MyModules.input' (value) {
        const vm = this
        if (value !== this.inputEditor.getValue()) {
            this.inputEditor.setValue(JSON.parse(value))
        }
    }
},

谁能告诉我，如果我不做 JSON.parse 为什么 CodeMirror 数据不会更新？

Answer 1

将其链接到主代码镜像对象，确保没有其他链接：

.on('change', editor => {
   globalContent = editor.getValue();
});;

Answer 2

提供答案，因为它可能对以后的其他人有帮助：

实际上 vm.inputEditor.refresh() 会起作用，唯一的问题是我将它与 setTimeout 0.001s 一起使用，这是快速刷新的方式。

经过多次尝试，我发现了我的愚蠢错误。我尝试将其更改为 1000 或 500，现在可以使用了。

变化如下：

setTimeout(function () {
 vm.inputEditor.refresh()
}, 1000)

Codemirror 不会刷新文本区域的内容，直到它被单击或者如果我在设置时对内容使用 JSON.parse

Codemirror does not refresh the contents of the textarea until its clicked or if I use the JSON.parse on the contents while setting

textarea

codemirror

vue.js

ui-codemirror

nuxt.js