小程序input组件type="nickname"获取微信昵称，v-model绑定值为空。手输的可以，但是选择使用微信昵称，v-model的值不会变，这个是什么问题呢？
l***@live.com
- 发布：2022-08-04 11:10
- 更新：2024-09-23 10:58
- 阅读：9826
uniapp版本，在同步时，通过如下方式获取value，亲测可用
uni.createSelectorQuery().in(this) // 注意这里要加上 in(this)
.select("#nickname-input")
.fields({
properties: ["value"],
})
.exec((res) => {
const nickName = res?.[0]?.value
console.log('昵称', nickName)
})
通过 input blur 事件 e.detail.value 获取，非 uni-app 问题，微信小程序设计如此
-
-
-
-
是的，根据小程序文档（https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.html）原文"在开发者工具上，input 组件是用 web 组件模拟的，因此部分情况下并不能很好的还原真机的表现，建议开发者在使用到原生组件时尽量在真机上进行调试。"，在微信开发者工具有这个问题，真机没有问题
2023-08-24 08:34
-
这样可以获取到。
<form>
<button class="input-item avatar-wrapper between" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
<view class="label">头像</view>
<text v-if="!form.avatar" class="before">请选择头像</text>
<image v-if="form.avatar" class="avatar" :src="form.avatar" width="40" height="40"></image>
<image v-else class="avatar" :src="avatar" width="40" height="40"></image>
</button>
<u-input type="nickname" v-model="form.nickname" @blur="getnickname" placeholder="请选择或输入称呼"/>
<u-button type="error" shape="circle" class="submit_btn" @click="submit">提交</u-button>
</form>
定义变量
data() {
return {
avatar:'',
form: {
avatar: '',
nickname: ''
}
},
methods: {
getnickname(e){
this.form.nickname = e;
},
submit (){
console.log(form)
}
}
<form @submit="showNickname">
<input type="nickname" placeholder="请输入昵称" name="nickname"/>
<button form-type="submit">查看输入的昵称</button>
</form>
showNickname(e) {
// 获取到的昵称
console.log(e.detail.value.nickname)
}
<input ref="nickNameRef" type="nickname" v-model="nickName" :placeholder="nickName" @blur="handleNickNameChange" />
handleNickNameChange(e) {
console.log('handleNickNameChange', e.detail.value);
this.nickName = e.detail.value
// 保存昵称接口
...
}
小安迪
补充，需要将"#nickname-input"替换成input的id，如：
<input id="test-input"..../>
2023-11-08 10:27