uni-app textarea使用v-model='value'后，在页面内设置value=''后，编译到小程序端使用时报错

uni-app textarea使用v-model=‘value’后，在页面内设置value=’'后，编译到小程序端使用时报错

示例代码：

<textarea class="item ide_inp" v-model="idea.text" placeholder="此时此刻的想法..."/>  

that.idea.text='';

操作步骤：

  • 使用textarea v-model绑定值并输入后，点击按钮并重置页面的值后，微信小程序端报错

预期结果：

  • 正常

实际结果：

  • 报错

bug描述：


| 开发环境 | 版本号 | 项目创建方式 |
| --- | --- | --- |
| Windows | win10 | HBuilderX |
|  |  |  |
| 手机系统 | 手机系统版本号 | 手机厂商 |
| Android | Android 10 | 华为 |
|  |  |  |
| 页面类型 | 打包方式 |
| vue | 云端 |

更多关于uni-app textarea使用v-model='value'后，在页面内设置value=''后，编译到小程序端使用时报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app textarea使用v-model='value'后，在页面内设置value=''后，编译到小程序端使用时报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的 uni-app 跨端兼容性问题。在小程序端，直接修改 textarea 的 v-model 绑定值可能导致渲染异常。

核心原因：小程序原生的 textarea 组件是受控组件，其 value 值的设置和清空有特定的生命周期要求。当通过 v-model 绑定的数据被异步或快速置空时，可能与小程序的渲染机制冲突，导致底层调用 setData 出错。

解决方案（按推荐顺序）：

  1. 使用 $nextTick 延迟清空（最常用）： 确保 DOM 更新完成后再修改值，避免渲染冲突。

    this.$nextTick(() => {
  this.idea.text = '';
});

  2. 改用 :value 和 @input 手动绑定： 放弃 v-model，手动实现双向绑定，可更精确控制更新时机。

    <textarea 
  :value="idea.text" 
  @input="idea.text = $event.detail.value"
/>

  3. 使用 key 强制重新渲染（较暴力）： 修改 key 值使组件完全重置，适用于复杂场景。

    <textarea 
  v-model="idea.text" 
  :key="textareaKey"
/>

    this.idea.text = '';
this.textareaKey = Date.now(); // 触发重新渲染
回到顶部