Vue.js计算属性Setter结合对象双向绑定及富文本编辑实现问询

嘿，针对你这个场景，核心要解决的就是把Quill编辑器的内容和激活项的HTML内容双向绑定，让编辑操作能同步回原数据，同时v-html的预览也能实时更新。我给你一步步拆解实现思路：

1. 先理清楚数据结构和基础逻辑 #

假设你的原数据是类似这样的对象集合（举个实际例子方便理解）：

data() {
  return {
    // 原始数据项，每个项存的是纯文本/HTML内容
    contentItems: [
      { id: 1, rawContent: "默认第一项内容" },
      { id: 2, rawContent: "默认第二项内容" }
    ],
    // 当前激活的项ID
    activeItemId: 1
  };
}

你原来的计算属性是给每个项套<li>标签，比如：

computed: {
  activeFormattedItem() {
    const activeItem = this.contentItems.find(item => item.id === this.activeItemId);
    return activeItem ? `<li>${activeItem.rawContent}</li>` : "";
  }
}

但计算属性是只读的，没法直接和Quill双向绑定，所以我们需要一个中间变量来做中转。

2. 引入Quill并搭建双向绑定桥梁 #

首先确保你已经引入了Vue版的Quill组件（比如vue-quill-editor），然后在data里加一个editorSyncContent变量，用来同步编辑器和激活项的内容：

data() {
  return {
    // ... 原来的contentItems和activeItemId
    editorSyncContent: "",
    // Quill的配置项，按需开启工具栏功能
    quillOptions: {
      theme: "snow",
      modules: {
        toolbar: [["bold", "italic"], ["link"], [{ list: "bullet" }]]
      }
    }
  };
}

接下来用watch来做双向同步：

watch: {
  // 切换激活项时，把对应内容加载到编辑器
  activeItemId(newId) {
    const targetItem = this.contentItems.find(item => item.id === newId);
    if (targetItem) {
      this.editorSyncContent = targetItem.rawContent;
    }
  },
  // 编辑器内容变化时，同步更新原数据的激活项内容
  editorSyncContent(newContent) {
    const targetItem = this.contentItems.find(item => item.id === this.activeItemId);
    if (targetItem) {
      targetItem.rawContent = newContent;
      // 这里更新原数据后，计算属性activeFormattedItem会自动重新计算，v-html预览就跟着变了
    }
  }
},
mounted() {
  // 初始化页面时，把默认激活项的内容加载到编辑器
  const initItem = this.contentItems.find(item => item.id === this.activeItemId);
  if (initItem) {
    this.editorSyncContent = initItem.rawContent;
  }
}

3. 调整模板结构 #

模板里只需要把v-html预览和Quill编辑器关联起来就行：

<!-- 激活项的预览区域，用v-html输出计算后的<li>内容 -->
<div class="item-preview" v-html="activeFormattedItem"></div>

<!-- Quill编辑器，绑定中间变量实现双向同步 -->
<quill-editor 
  v-model="editorSyncContent" 
  :options="quillOptions"
  class="editor"
></quill-editor>

<!-- 切换激活项的按钮组，示例用 -->
<div class="item-switcher">
  <button 
    v-for="item in contentItems" 
    :key="item.id"
    @click="activeItemId = item.id"
    :class="{ active: item.id === activeItemId }"
  >
    编辑项 {{ item.id }}
  </button>
</div>

4. 注意事项和优化点 #

• 如果你的原始内容包含HTML（比如后端返回的富文本），Quill会自动解析，只要你在配置里开启了对应的格式支持就行。
• 要是需要把编辑器内容转成纯HTML保存到后端，直接取editorSyncContent就可以（Vue-Quill的v-model默认绑定的就是HTML格式内容），或者通过Quill实例的$refs.quillEditor.quill.root.innerHTML获取完整HTML。
• 如果担心XSS风险，记得在输出前做内容过滤，比如用Vue的v-html本身的安全机制，或者额外的过滤库。

这样一套下来，你就能通过Quill编辑器实时编辑激活项的内容，同时v-html的预览也会同步更新，完美匹配你的需求～

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