l***@live.com
l***@live.com
  • 发布:2022-08-04 11:10
  • 更新:2023-12-16 17:36
  • 阅读:7734

小程序input组件type="nickname"获取微信昵称,v-model绑定值为空

分类:uni-app

小程序input组件type="nickname"获取微信昵称,v-model绑定值为空。手输的可以,但是选择使用微信昵称,v-model的值不会变,这个是什么问题呢?

2022-08-04 11:10 负责人:无 分享
已邀请:
2***@qq.com

2***@qq.com

uniapp版本,在同步时,通过如下方式获取value,亲测可用

uni.createSelectorQuery().in(this) // 注意这里要加上 in(this)  
    .select("#nickname-input")  
    .fields({  
        properties: ["value"],  
    })  
    .exec((res) => {  
        const nickName = res?.[0]?.value  
        console.log('昵称', nickName)  
    })
  • 小安迪

    补充,需要将"#nickname-input"替换成input的id,如:

    <input id="test-input"..../>

    2023-11-08 10:27

DCloud_UNI_WZF

DCloud_UNI_WZF

通过 input blur 事件 e.detail.value 获取,非 uni-app 问题,微信小程序设计如此

  • z***@163.com

    第一次快递输入这个方法获取不到,收到改变下input的值才能获取,如何解决第一次获取不到的问题?

    2022-08-22 15:24

  • 2***@qq.com

    回复 z***@163.com: 获取值的时候写个延迟触发就行了

    2022-10-12 17:19

  • 1***@qq.com

    这样敏感词检测没用了。。。

    2022-12-01 22:47

  • StarStarry

    是的,根据小程序文档(https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.html)原文"在开发者工具上,input 组件是用 web 组件模拟的,因此部分情况下并不能很好的还原真机的表现,建议开发者在使用到原生组件时尽量在真机上进行调试。",在微信开发者工具有这个问题,真机没有问题

    2023-08-24 08:34

  • 4***@qq.com

    回复 1***@qq.com: 是的,验证的确如此

    2023-08-26 21:49

z***@163.com

z***@163.com

问题解决了吗?怎么解决的?

2***@qq.com

2***@qq.com

有人解决了吗

1***@qq.com

1***@qq.com

有解决的吗?

1***@qq.com

1***@qq.com

这样可以获取到。

<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)  
    }  
}  
  • ai自由畅想

    失去焦点敏感词检测不行,我在提交事件使用 uni.createSelectorQuery().in(this)

    .select("#nickname-input") 又设置一次

    2022-11-17 21:07

  • 伊豆

    getnickname取到的是undefined

    2023-04-25 18:13

王飞master

王飞master

<form @submit="showNickname">  
    <input type="nickname" placeholder="请输入昵称" name="nickname"/>  
    <button form-type="submit">查看输入的昵称</button>  
</form>  

showNickname(e) {  
    // 获取到的昵称  
    console.log(e.detail.value.nickname)  
}
3***@qq.com

3***@qq.com

<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  

      // 保存昵称接口  
     ...  
}
  • x***@163.com

    为什么我用这个方法,第一次不会获取到值,再点第二次才有值?

    2023-07-11 11:01

  • lyylovezys

    回复 x***@163.com: 我也一模一样

    2023-07-25 00:47

要回复问题请先登录注册