uniapp 解决切换页面后textarea组件的autoheight失效问题

问题描述>>

有两个页面，A页,B页；

A页面有通过v-for渲染一个textarea列表；

A页：

<template>
	<view class="view-container flex flex-direction bg-white">
		<view v-for="(item,idx) in arr" :key="item.uuid">
			<label for="">{{item.label}}</label>
			<textarea v-model="item.txt"  maxlength="-1" auto-height/>
		</view>
		<view>
			<button type="primary" @click="navto">跳转</button>
		</view>
	</view>
</template>

export default {
		data() {
			return {
				arr: [{
					txt: '',
					label:'标题一：'
				},{
					txt: '',
					label:'标题二：'
				}]
			};
		},
		onShow() {
			let {arr} = this;
			arr.map(item => {
				item.uuid = this.getuuid();
			})
		},
		methods: {
			navto(){
				uni.navigateTo({
					url: '/pages/pageb'
				})
			},
			getuuid() {
				return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
					var r = Math.random() * 16 | 0,
						v = c == 'x' ? r : (r & 0x3 | 0x8);
					return v.toString(16);
				});
			}
		}
	};

 

在A页跳转至B页后再返回A页，这是给textarea设置的auto-height 失效，再次输入新文本只会换行，高度不会改变，而如果是通过其他方式增加文本，这时连换行都不会换行；

解决办法>>

在生命周期onShow里面对数组arr的每一项赋一个随机值，我这里是赋值uuid,在v-for的时候，通过更新绑定key值来强制重新渲染textarea组件，这样就解决了这个问题；

具体原因不多说，可以看vue官方文档  了解一下>>