uniapp微信小程序解决type=“nickname“获取昵称,v-model绑定值为空问题!

本文主要是介绍uniapp微信小程序解决type=“nickname“获取昵称,v-model绑定值为空问题!,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

解决获取 type="nickname"值为空问题

文章目录

    • 解决获取 type="nickname"值为空问题
      • 效果图
      • Demo
      • 解决方式
        • 通过表单收集内容
        • 通过 uni.createSelectorQuery

效果图

开发工具效果图,真机上还会显示键盘输入框

在这里插入图片描述


Demo

  • 如果通过 v-model 结合 @blur 获取不到值(个人测试,仅供参考)
<input type="nickname" v-model="nickName" @blur="blurNickName" placeholder="请输入昵称" maxlength="20" />

解决方式

通过表单收集内容
<form @submit="formSubmitInfoTap"><input type="nickname" name="nickName" placeholder="请输入昵称" maxlength="20" /><button class="submitBtn" type="primary" form-type="submit" size="large">确认</button>
</form>

formSubmitInfoTap(e) {let formdata = e.detail.value;console.log('获取昵称', formdata.nickName)// xxx
}

通过 uni.createSelectorQuery
  • 定义ID
<input id="nickName" type="nickname" placeholder="请输入昵称" maxlength="20" /><button type="primary" @click="avatarInfoTap">确认</button>

uni.createSelectorQuery().in(this).select("#nickName").fields({properties: ["value"],}).exec((res) => {  const nickName = res?.[0]?.value  console.log('获取昵称', nickName)// xxx})

这篇关于uniapp微信小程序解决type=“nickname“获取昵称,v-model绑定值为空问题!的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1003245

相关文章

Springboot项目启动失败提示找不到dao类的解决

《Springboot项目启动失败提示找不到dao类的解决》SpringBoot启动失败,因ProductServiceImpl未正确注入ProductDao,原因:Dao未注册为Bean,解决:在启... 目录错误描述原因解决方法总结***************************APPLICA编

解决pandas无法读取csv文件数据的问题

《解决pandas无法读取csv文件数据的问题》本文讲述作者用Pandas读取CSV文件时因参数设置不当导致数据错位,通过调整delimiter和on_bad_lines参数最终解决问题,并强调正确参... 目录一、前言二、问题复现1. 问题2. 通过 on_bad_lines=‘warn’ 跳过异常数据3

解决RocketMQ的幂等性问题

《解决RocketMQ的幂等性问题》重复消费因调用链路长、消息发送超时或消费者故障导致,通过生产者消息查询、Redis缓存及消费者唯一主键可以确保幂等性,避免重复处理,本文主要介绍了解决RocketM... 目录造成重复消费的原因解决方法生产者端消费者端代码实现造成重复消费的原因当系统的调用链路比较长的时

深度解析Nginx日志分析与499状态码问题解决

《深度解析Nginx日志分析与499状态码问题解决》在Web服务器运维和性能优化过程中,Nginx日志是排查问题的重要依据,本文将围绕Nginx日志分析、499状态码的成因、排查方法及解决方案展开讨论... 目录前言1. Nginx日志基础1.1 Nginx日志存放位置1.2 Nginx日志格式2. 499

SpringBoot监控API请求耗时的6中解决解决方案

《SpringBoot监控API请求耗时的6中解决解决方案》本文介绍SpringBoot中记录API请求耗时的6种方案,包括手动埋点、AOP切面、拦截器、Filter、事件监听、Micrometer+... 目录1. 简介2.实战案例2.1 手动记录2.2 自定义AOP记录2.3 拦截器技术2.4 使用Fi

kkFileView启动报错:报错2003端口占用的问题及解决

《kkFileView启动报错:报错2003端口占用的问题及解决》kkFileView启动报错因office组件2003端口未关闭,解决:查杀占用端口的进程,终止Java进程,使用shutdown.s... 目录原因解决总结kkFileViewjavascript启动报错启动office组件失败,请检查of

Python获取浏览器Cookies的四种方式小结

《Python获取浏览器Cookies的四种方式小结》在进行Web应用程序测试和开发时,获取浏览器Cookies是一项重要任务,本文我们介绍四种用Python获取浏览器Cookies的方式,具有一定的... 目录什么是 Cookie?1.使用Selenium库获取浏览器Cookies2.使用浏览器开发者工具

SQL Server安装时候没有中文选项的解决方法

《SQLServer安装时候没有中文选项的解决方法》用户安装SQLServer时界面全英文,无中文选项,通过修改安装设置中的国家或地区为中文中国,重启安装程序后界面恢复中文,解决了问题,对SQLSe... 你是不是在安装SQL Server时候发现安装界面和别人不同,并且无论如何都没有中文选项?这个问题也

Java获取当前时间String类型和Date类型方式

《Java获取当前时间String类型和Date类型方式》:本文主要介绍Java获取当前时间String类型和Date类型方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录Java获取当前时间String和Date类型String类型和Date类型输出结果总结Java获取

C#监听txt文档获取新数据方式

《C#监听txt文档获取新数据方式》文章介绍通过监听txt文件获取最新数据,并实现开机自启动、禁用窗口关闭按钮、阻止Ctrl+C中断及防止程序退出等功能,代码整合于主函数中,供参考学习... 目录前言一、监听txt文档增加数据二、其他功能1. 设置开机自启动2. 禁止控制台窗口关闭按钮3. 阻止Ctrl +