Vue 2 中使用 v-model 搞定 contentEditable

在 Vue 2 中使用 v-model 实现 contentEditable

前言

在 Vue 中使用 contentEditable 属性编辑文本时，可能会遇到与 v-model 数据绑定的冲突。本文将深入探讨这一冲突的根源，并提供一个可行的解决方案。

冲突的根源

contentEditable 允许用户直接在 DOM 中编辑元素的内容，而 v-model 则负责在 Vue 实例和 DOM 之间保持数据同步。当这两个功能同时应用于同一个元素时，就会产生冲突。浏览器会接管 contentEditable 元素的编辑，而 v-model 无法捕捉这些更改，导致 Vue 实例中的数据与 DOM 中的内容不一致。

解决方案

为了解决此冲突，可以使用 input 事件监听器手动更新 Vue 实例中的数据。当用户输入内容时，事件监听器将触发，获取编辑的元素并使用其 textContent 属性更新 Vue 实例中相应项目的值。

// v-on:input 事件监听器
v-on:input="updateContent(e)"

// updateContent 方法
updateContent(e) {
  // 获取编辑的元素
  const el = e.target;

  // 从元素的 id 中获取索引
  const index = el.id.split('-')[1];

  // 更新 Vue 实例中的数据
  this.content[index].value = el.textContent;
}

使用示例

<p
  v-for="(value, index) in content"
  :id="'content-' + index"
  v-on:input="updateContent($event)"
  contenteditable
></p>

结论

通过使用 input 事件监听器，我们在 Vue 2 中成功实现了 contentEditable 和 v-model 的共存。现在，用户可以无缝编辑文本，而 Vue 实例中的数据将始终保持与 DOM 中的内容同步。

常见问题解答

• 为什么会出现 contentEditable 和 v-model 的冲突？

  因为 contentEditable 允许用户直接在 DOM 中编辑内容，而 v-model 负责保持 Vue 实例和 DOM 之间的数据同步。当这两个功能同时应用于同一个元素时，就会产生冲突。

• 如何解决此冲突？

  可以使用 input 事件监听器手动更新 Vue 实例中的数据，以反映用户在 contentEditable 元素中所做的更改。

• 为什么使用 textContent 属性更新数据？

  textContent 属性包含元素中所有文本节点的内容，包括换行符和空格。这确保了 Vue 实例中的数据与 DOM 中的内容完全同步。

• 我可以使用其他事件监听器吗？

  keyup 和 keydown 事件监听器也可以用来监听用户的输入。但是，input 事件监听器在性能方面更有效，因为它只在用户停止键入时触发。

• 这种方法是否适用于所有 Vue 版本？

  本文提供的方法适用于 Vue 2。对于 Vue 3 及更高版本，请参阅官方文档以了解特定的实施细节。