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>

 

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐