Vue2Editor异步获取数据后内容无法更新问题求助

刚碰到过一模一样的坑！我来给你唠唠问题根儿和解决办法：

问题场景复盘 #

你用Vue2Editor开发的组件，原本运行正常，但在异步获取文章数据后遇到了诡异的情况：

• 同步赋值this.content = "Here works"时，普通<div>{{content}}</div>和编辑器内容都能正常更新
• 但await请求完成后赋值this.content = data.article，只有div的内容更新了，Vue2Editor完全没反应
• 你还在代码里加了一行document.getElementsByClassName("ql-editor")[0].focus()手动给编辑器设焦点

问题原因 #

那行手动操作DOM的focus代码就是罪魁祸首！Vue2Editor是基于Quill封装的组件，它内部通过v-model和响应式来维护编辑器内容和数据的同步。但你直接通过document获取DOM元素并调用focus，相当于绕开了Vue的响应式系统，干扰了组件内部的状态监听逻辑，导致后续content更新时，编辑器无法感知到变化。

解决办法 #

1. 快速修复（你已经找到的方法）

直接注释掉那行手动操作DOM的代码：

async getPost(id) {
  this.content = "Here works"; // 此时div和编辑器内容都会更新
  const {data} = await pressRepository.getPost(id)
  // 删掉这行：document.getElementsByClassName("ql-editor")[0].focus();
  this.content = data.article; // 现在编辑器和div都会正常更新了
}

2. 保留焦点功能的正确姿势

如果还是需要给编辑器设置焦点，别直接操作DOM，用Vue2Editor提供的ref来获取编辑器实例：
首先给组件加ref属性：

<vue-editor ref="postEditor" v-model="content" :editorToolbar="customToolbar"></vue-editor>

然后在异步请求完成后，通过ref调用Quill实例的focus方法：

async getPost(id) {
  this.content = "Here works";
  const {data} = await pressRepository.getPost(id);
  this.content = data.article;
  // 通过ref获取编辑器实例并设置焦点
  this.$refs.postEditor.quill.focus();
}

这样既实现了焦点需求，又不会破坏Vue的响应式绑定。

内容的提问来源于stack exchange，提问作者Uncoke