Vue中contenteditable内容重复但绑定变量未变更问题

听起来你遇到了一个挺棘手的特定元素异常——只有Path2在切换焦点后出现内容重复，但绑定的变量值却没变化。结合你描述的现象和代码片段，我整理了几个针对性的排查方向和解决方案：

1. 先检查updateHtml函数的核心逻辑 #

最可能的问题出在内容同步的函数里，先确认它是直接赋值而不是错误地拼接内容：

// 正确的同步逻辑应该是这样的
updateHtml(e, propName) {
  // 用trim()避免意外的空格干扰，确保直接赋值给变量
  this.PC[propName] = e.target.innerText.trim();
}

如果函数里写了类似this.PC.Path2 += e.target.innerText的代码，就会导致内容重复，但你说变量值还是"1234"，那大概率是视图更新时的DOM操作出了问题，而非变量赋值逻辑。

2. 排查Path2的事件绑定与焦点处理 #

从你提供的代码片段看，Path2所在容器绑定了focusPath2点击事件，先检查这个函数的实现：

focusPath2() {
  // 尽量用Vue的ref获取元素，避免选择器匹配错误
  const path2El = this.$refs.path2El;
  path2El.focus();
  
  // 重点：这里如果写了类似下面的代码，就会导致重复！
  // path2El.innerText += this.PC.Path2; 
  // 正确的同步应该是直接赋值，确保视图和变量一致
  path2El.innerText = this.PC.Path2;
}

另外，检查Path2的事件绑定是否重复，比如同时绑定了@blur和@input，且两次都调用了updateHtml，可能在焦点切换时触发了重复的DOM更新。

3. 检查其他元素的事件是否"误伤"Path2 #

你提到切换到Title1并失焦后才出现问题，那要排查Title1的失焦处理函数，有没有不小心修改了Path2的DOM内容：

// 比如Title1的失焦函数里，有没有错误操作Path2的代码
updateTitle1(e) {
  this.PC.Title1 = e.target.innerText;
  // 警惕这种误写：
  // document.querySelector('.path').innerText = this.PC.Path2 + this.PC.Path2;
}

4. 确保变量的响应式正常 #

虽然其他元素正常，但还是确认下PC对象在组件data里是正确初始化的，避免Path2属性未被Vue监听：

data() {
  return {
    PC: {
      Path2: '',
      Title1: '',
      // 其他三个contenteditable对应的变量
    }
  }
}

如果Path2是后续动态添加到PC的属性，需要用this.$set(this.PC, 'Path2', '')来确保响应式，但这个可能性较低，因为你说其他元素正常。

5. 给Path2添加唯一标识避免选择器冲突 #

建议给Path2元素添加Vue的ref，避免通过类名选择元素时匹配到其他元素：

<div class="PathContainer" v-on:click="focusPath2">
  <div ref="path2El" class="namespace edit path" contenteditable="true" @blur="updateHtml($event, 'Path2')">
    {{ PC.Path2 }}
  </div>
</div>

这样在操作元素时就不会误操作到其他同类型元素。

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