uniapp input输入框在APP端拿不到的问题

uniapp的input双向绑定在APP端拿不到值的问题在uniapp 使用 input 的 v-model进行数据绑定在输入法没确定时候 input框显示有值但是动态绑定的变量是获取不到相对应的值，而这个时候你如果想要提交数据什么的，会发现一直是个空在上图这个情况下用户没选择对应英文直接按保存的话会发现一直拿不到数据但页面又显示出数据（存在于部分手机和iOS）解决这个问题的方法就是

陈小白_weilin

3530人浏览 · 2021-03-20 10:58:28

陈小白_weilin · 2021-03-20 10:58:28 发布

uniapp的input双向绑定在APP端拿不到值的问题

在uniapp 使用 input 的 v-model进行数据绑定在输入法没确定时候 input框显示有值但是动态绑定的变量是获取不到相对应的值，而这个时候你如果想要提交数据什么的，会发现一直是个空

在上图这个情况下用户没选择对应英文直接按保存的话 会发现一直拿不到数据但页面又显示出数据（存在于部分手机和iOS）

解决这个问题的方法就是在保存的方法触发加上一个定时器和失去焦点

1.第一步在input动态设置fcous属性

2. 点击保存的时候去掉焦点添加定时器

完整的代码由于里面有我自己封装的组件所以不可以直接用template的组件只需要拿input出来就可以

<template>
	<view class="content">
		<c-label label="input输入的值">
			<text>{{val}}</text>
		</c-label>
		<c-label label="input">
			<input type="text" value="" v-model="val" :focus="isFocus"  placeholder="请输入"/>
		</c-label>
		<view class="m30">
			<c-button type="default" round="" @click="save">确定</c-button>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				val : '',
				isFocus : false,
				timer : null,
				
			};
		},
		async onLoad() {
			
		},
		methods: {
			save(){
				/* 取消焦点 */
				this.isFocus = false;
				/* 添加定时器 */
				clearTimeout(this.timer);
				this.timer = setTimeout(()=>{
					// 逻辑操作
				},300)
				
			}
		},
		async onShow() {
			const that = this;
			/* 登录操作处理 */
			// this.$store.dispatch('login/checkLogin')
		},
		async onReady() {
		}
	};
</script>


<style lang="scss">
</style>