Vue中div标签结合v-model绑定失效问题求助

你的问题出在：Vue的v-model默认只适配标准表单元素（input/textarea等），contenteditable的div不属于这类元素，所以直接封装成组件后，父组件的v-model无法自动和子组件的div内容双向绑定——子组件既没接收父组件传的初始值，也没在内容变化时通知父组件更新。

下面是具体修复步骤：

1. 修改CommentSection子组件 #

需要给子组件添加v-model所需的核心机制：接收父组件的value props，监听div的输入事件并触发input事件把新内容传给父组件，同时同步父组件的value变化到div中。

修改后的CommentSection.vue代码：

<template>
  <div 
    id="chatId" 
    contenteditable="true" 
    placeholder="Leave a message" 
    class="overflow-hidden block mx-4 text-left p-2.5 w-full text-sm text-gray-900 bg-white rounded-2xl border border-gray-300 focus:ring-blue-500 focus:border-blue-500"
    @input="handleInput"
  />
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleInput() {
      // 获取div的纯文本内容（需保留HTML格式可替换为innerHTML）
      const content = this.$el.textContent.trim()
      // 触发input事件，将内容同步给父组件
      this.$emit('input', content)
    }
  },
  watch: {
    // 监听父组件value变化，同步更新div内容
    value(newVal) {
      if (this.$el.textContent !== newVal) {
        this.$el.textContent = newVal
      }
    }
  },
  mounted() {
    // 初始化时设置div的初始内容
    this.$el.textContent = this.value
  }
}
</script>

<style>
#chatId[contenteditable="true"]:empty:not(:focus):before {
  content: attr(placeholder);
  color: #9ca3af; /* 补充占位符颜色，贴近原生表单体验 */
}
</style>

2. 父组件无需额外修改 #

你的MainPage.vue代码保持原样即可，v-model="comment"会自动把父组件的comment作为value传给子组件，同时监听子组件的input事件更新comment。

关键说明 #

• 用textContent而非innerHTML：评论区通常不需要富文本格式，textContent可以避免用户输入时产生的冗余HTML标签（比如回车生成的<br>），若需支持简单格式，再替换为innerHTML。
• watch和mounted处理：确保父组件主动修改comment时，子组件的div内容能同步更新，避免数据不一致。
• @input事件监听：contenteditable元素输入时会触发input事件，以此实现实时双向绑定。

测试后点击提交按钮，就能正常输出输入的评论内容了。

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