mpvue开发小程序 textarea获取不到值问题

最新推荐文章于 2023-05-19 11:58:08 发布

伊丽莎白太阳花

最新推荐文章于 2023-05-19 11:58:08 发布

阅读量898

点赞数

分类专栏： vue mpvue

本文链接：https://blog.youkuaiyun.com/weixin_28898107/article/details/105032762

版权

vue 同时被 2 个专栏收录

15 篇文章

订阅专栏

mpvue

1 篇文章

订阅专栏

本文探讨了在MPVue项目中，textarea值在change事件与click事件间同步的问题。详细解释了为何在提交时无法获取最新输入值，并提供了一个使用定时器延时触发提交的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们在做项目的时候都会遇到意见反馈这个功能，mpvue开发项目时候总是拿不到 textarea的值,这是什么原因呢？

<template>
	<div class='feed_back'>
		<textarea :value="textAreaValue" @change="getChange($event)" class='text_area' cols="100%" rows="10" placeholder="请输入反馈内容" ></textarea>
		<div class='submitButton'>
			<button class='button_class' @click.stop="submitClick">提交</button>	
		</div>
		<van-dialog id='van-dialog' />
	</div>
</template>

这是因为change事件晚于click事件，在点击提交那一刻，change事件还未获取到文本框的值，导致提交拿到的textAreaValue是个空值，那有什么办法可以解决呢？

答：change事件比click事件早发生，或者click比change事件晚发生，根据自己实际情况选择，我选用定时器将click事件延迟发生

getChange(e){
	this.textAreaValue = e.mp.detail.value;
},
submitClick(){
   setTimeout(()=>{		
     if(this.textAreaValue.trim().length>0){					            
         setFeedback({memberId:getGetMember().id,descpt:this.textAreaValue}).then((res)=>{
			Dialog.alert({
				 title: '提示',
				 message: '你的意见已提交'
			}).then(() => {
				wx.switchTab({url:'/pages/personal/main'});
			})	
							
		})
	  }else {
				Dialog.alert({
				   title: '提示',
			       message: '请输入你得留言内容'
				}).then(() => {
						 	
	  })	
			return null;
	}		
  },1000)
}