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})