Vue.js 实现可编辑内容中动态插入下拉选择框的正确方式

本文详解如何在 vue 中基于响应式数据驱动，安全、可靠地在 contenteditable 区域内插入多个受控下拉框，并准确获取其选中值，避免手动 dom 操作导致的状态不同步问题。

在 Vue 开发中，直接操作 contenteditable 的 DOM（如 appendChild 创建 ）会绕过 Vue 的响应式系统，导致组件状态（如 selectedOption）与真实 DOM 选中值脱节——这正是原代码中“始终返回第一个选项”的根本原因：v-model 缺失，select 元素未与数据双向绑定，getDataModel 读取的是初始静态值而非实时用户选择。

✅ 正确做法是放弃手动 DOM 插入，转而采用 Vue 推荐的声明式、数据驱动模式：将每个下拉框抽象为一个响应式对象，用 v-for 渲染，并通过 v-model 绑定选中值。这样，Vue 自动同步视图与数据，无需手动查询 select.options 或克隆节点。

以下是优化后的完整实现方案：