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

Question

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

以下是由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";
}
}

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

1. 尝试刷新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)
}
}
},

2. 尝试在我的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)