问题描述>>
有两个页面,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官方文档 了解一下>>