uni-app textarea 设置 auto-height 后，从服务端取数据赋值只显示一行，需聚焦再失效才能正常显示

项目信息	详细信息
产品分类	uniapp/小程序/微信
PC开发环境操作系统	Mac
PC开发环境操作系统版本号	12.6
HBuilderX类型	正式
HBuilderX版本号	3.98
第三方开发者工具版本号	22
基础库版本号	22
项目创建方式	HBuilderX

操作步骤：

多个textare组件，设置为autoheight，数据从服务器拿，每个内容稍微多点

预期结果：

正常显示所有内容

实际结果：

内容只显示了一行，其他的被隐藏了

bug描述：

我们有个个人信息编辑页，多个textarea组件，进这个信息修改页的时候从服务器拿数据，发现我们设置了auto-height之后，很多多行的内容被隐藏的只有一行或者两行这样

这里微信做了说明如下图：‘textarea 的 auto-height 必须要在屏才能计算高度，先展示再赋值’

这个咱们能不能修复一下？

sinazl 1楼•6 天前

看截图微信官方回复和代码截图，安卓真机自己处理 settimtout 能解决问题，你的意思是需要在文档中做解释说明吗？

sinazl 2楼•6 天前

我觉得文档里有必要说明下。。。

gougou168 3楼•6 天前

在使用 uni-app 开发时，如果你在 textarea 组件中设置了 auto-height 属性，并且从服务端获取数据后赋值给 textarea，可能会出现只显示一行的情况。这是因为 auto-height 在初始渲染时可能没有正确计算高度，导致显示异常。

解决方法

手动触发高度计算：在数据赋值后，手动触发 textarea 的高度计算。可以通过调用 textarea 的 adjustPosition 方法来实现。

<template>
  <view>
    <textarea
      :value="content"
      @input="onInput"
      auto-height
      ref="textarea"
    ></textarea>
  </view>
</template>

<script>
export default {
  data() {
    return {
      content: ''
    };
  },
  methods: {
    onInput(e) {
      this.content = e.detail.value;
    },
    async fetchData() {
      // 模拟从服务端获取数据
      const response = await fetch('https://example.com/api/data');
      const data = await response.json();
      this.content = data.content;

      // 手动触发高度计算
      this.$nextTick(() => {
        this.$refs.textarea.adjustPosition();
      });
    }
  },
  mounted() {
    this.fetchData();
  }
};
</script>

使用 setTimeout 延迟触发：如果 $nextTick 无法解决问题，可以尝试使用 setTimeout 延迟触发高度计算。

async fetchData() {
  const response = await fetch('https://example.com/api/data');
  const data = await response.json();
  this.content = data.content;

  setTimeout(() => {
    this.$refs.textarea.adjustPosition();
  }, 100);
}

使用 v-if 强制重新渲染：如果上述方法仍然无效，可以尝试使用 v-if 强制重新渲染 textarea 组件。

<template>
  <view>
    <textarea
      v-if="showTextarea"
      :value="content"
      @input="onInput"
      auto-height
      ref="textarea"
    ></textarea>
  </view>
</template>

<script>
export default {
  data() {
    return {
      content: '',
      showTextarea: true
    };
  },
  methods: {
    onInput(e) {
      this.content = e.detail.value;
    },
    async fetchData() {
      const response = await fetch('https://example.com/api/data');
      const data = await response.json();
      this.content = data.content;

      // 强制重新渲染
      this.showTextarea = false;
      this.$nextTick(() => {
        this.showTextarea = true;
      });
    }
  },
  mounted() {
    this.fetchData();
  }
};
</script>