【已解决】uni-textarea 无法绑定 v-model / 数据不回显？换原生 textarea 一招搞定！

在 uni-app 开发中，很多同学会遇到 <uni-textarea> 组件的坑：明明数据有值、v-model 绑定正确，但输入框就是不回显内容；甚至部分场景下 v-model 完全失效，只能输入却无法双向绑定。

试过重置样式、延迟渲染、更新 uni-ui 版本都没用？别折腾了！直接改用 uni-app 原生 <textarea> 组件，兼容性拉满，绑定和样式都能完全自定义。

问题复现

使用 <uni-textarea> 时，明明 value 有值、页面能打印出绑定的变量，但输入框内就是空白

vue 复制代码

<!-- 失效的 uni-textarea 写法 --> 
<uni-textarea v-model="content" placeholder="需求说明"></uni-textarea>
<text>数据存在：{{ content }}</text> <!-- 能打印，但输入框无内容 -->

解决方案：改用原生 textarea

直接替换为 uni-app 原生 <textarea>，样式完全自定义，v-model 绑定 100% 生效：

js 复制代码

<template>
  <view class="textarea-container">
    <!-- 原生 textarea 替代 uni-textarea -->
    <textarea
      v-model="content"
      placeholder="需求说明"
      class="native-textarea"
    ></textarea>
    <!-- 验证数据绑定 -->
    <text class="verify-text">当前值：{{ content }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 支持大文本、换行、特殊字符，绑定即回显
      content: `需求文本`
    };
  }
};
</script>

<style scoped>
/* 容器：确保输入框有足够空间 */
.textarea-container {
  padding: 20rpx;
  box-sizing: border-box;
}

/* 原生 textarea 样式自定义 */
.native-textarea {
  width: 100%;
  min-height: 500rpx; /* 最低高度，内容多了自动撑开 */
  padding: 10rpx;
  font-size: 28rpx; /* 适配多端的字体大小 */
  line-height: 42rpx; /* 行高舒适，避免文字重叠 */
  color: #333; /* 确保文字可见 */
  border: 1px solid #e8e8e8; /* 边框可视化 */
  border-radius: 8rpx; /* 圆角优化 */
  resize: none; /* 禁止手动拉伸 */
  box-sizing: border-box; /* 内边距计入宽高 */
  white-space: pre-wrap; /* 保留文本原有换行 */
  word-break: break-all; /* 超长文本自动换行 */
}

/* 验证文本样式（可选） */
.verify-text {
  display: block;
  margin-top: 20rpx;
  font-size: 24rpx;
  color: #666;
}
</style>

核心优势

绑定 100% 生效 ：原生 <textarea> 完全兼容 uni-app 的 v-model 双向绑定，数据一改输入框立刻回显；
样式完全可控 ：摆脱 uni-textarea 内置样式的束缚，宽高、行高、边框等想怎么改就怎么改；
多端适配：兼容微信小程序、H5、App 等所有 uni-app 支持的端，无兼容性问题；
支持特殊格式 ：white-space: pre-wrap 保留文本原有换行，大文本、特殊字符都能正常显示。

补充说明

为什么 uni-textarea 会失效？
- uni-ui 封装的 <uni-textarea> 底层用了绝对定位、多层嵌套，容易导致样式覆盖或渲染延迟；
- 部分版本的 uni-ui 存在 v-model 语法糖兼容问题，即使数据绑定成功也无法渲染。
原生 textarea 进阶用法（如需自定义 placeholder 样式）：

css 复制代码

/* 自定义 placeholder 颜色 */
.native-textarea::placeholder {
  color: #999;
  font-size: 26rpx;
}

如需限制输入长度：

ini 复制代码

<textarea
  v-model="content"
  placeholder="需求说明"
  class="native-textarea"
  maxlength="2000" <!-- 限制最大输入长度 -->
></textarea>

总结

如果你的 <uni-textarea> 遇到 v-model 绑定失效、数据不回显、样式无法修改等问题，直接替换为原生 <textarea> 是最高效的解决方案，无需纠结 uni-ui 组件的兼容问题，简单直接又稳定！