Vue3中defineModel绑定子组件v-model后无法重置输入值问题

1. 异步函数异常导致重置代码未执行 #

你的addComments函数没有错误捕获逻辑，如果commentsStore.addComment抛出异常（比如网络请求失败、接口报错），代码会直接中断，msg.value = ''这一行不会执行，输入框自然不会清空。

解决方法：
给异步操作添加try/catch包裹，确保重置逻辑无论请求成功与否都会执行：

async function addComments() {
  try {
    const response = await commentsStore.addComment(msg.value, id)
    if (response.status !== 200) {
      makeAToast('Something went wrong', 'warning')
      return
    }
    makeAToast('Added', 'success')
  } catch (error) {
    makeAToast('Something went wrong', 'warning')
  } finally {
    msg.value = ''
  }
}

2. Vue版本兼容问题 #

defineModel是Vue 3.4及以上版本才正式推出的语法糖，如果你的Vue版本低于3.4，会导致双向绑定逻辑不生效。

解决方法：
检查项目中Vue的版本，执行以下命令查看：

npm list vue

如果版本低于3.4，升级Vue到最新稳定版：

npm install vue@latest

3. 显式确认defineModel双向绑定配置（可选） #

虽然Vue 3.4+中defineModel默认支持双向绑定，但如果存在特殊场景的响应式异常，可以显式配置参数确保值同步：
子组件代码修改为：

<template>
  <textarea
    v-model="model"
    required
  />
</template>

<script setup>
import { defineModel } from 'vue'

// 显式配置双向绑定，强制同步父组件值
const model = defineModel({ local: false })
</script>

快速验证步骤 #

1. 在msg.value = ''行添加console.log('重置msg:', msg.value)，确认代码是否执行到此处。
2. 查看浏览器控制台是否有报错信息，排查是否有其他代码干扰响应式更新。

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