1***@qq.com
1***@qq.com
  • 发布:2021-09-10 10:34
  • 更新:2022-01-25 15:08
  • 阅读:836

【报Bug】uni-app nvue input标签用v-if控制显示隐藏时,前一个被隐藏的input中的值会被赋到后一个出现的input上

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

HBuilderX类型: 正式

HBuilderX版本号: 3.2.3

手机系统: Android

手机系统版本号: Android 11

手机厂商: 华为

手机机型: 华为nova2plus

页面类型: nvue

打包方式: 离线

项目创建方式: HBuilderX

示例代码:
<template> <view class="page"> <image src="../../static/logo.png" mode="" class="logo"></image> <view class="account-login-way"> <view class="list" @click="tab_index=0"> <text class="text" :class="{active:tab_index==0}">账号密码登录</text> <view class="border" :class="{active:tab_index==0}"></view> </view> <view class="list" @click="tab_index=1"> <text class="text" :class="{active:tab_index==1}">手机验证码登录</text> <view class="border" :class="{active:tab_index==1}"></view> </view> </view> <view class="input-group"> <text class="icon">&#xe642;</text> <input class="input" type="number" v-model="user_phone" placeholder="请输入手机号"/> </view> <view class="input-group" v-if="tab_index==0"> <text class="icon">&#xe665;</text> <input class="input" v-if="tab_index==0" type="password" v-model="user_pwd" placeholder="请输入密码"/> </view> <view class="input-group" v-if="tab_index==1"> <text class="icon">&#xe609;</text> <input class="input" type="text" v-if="tab_index==1" v-model="check_code" placeholder="请输入验证码"/> <view class="btn-send"> <text class="btn-text">发送验证码</text> </view> </view> <view class="link-box"> <text class="left" @click="goForgetPassword">忘记密码?</text> <text class="right" @click="goRegister">新用户注册</text> </view> <view class="btn" @click="login"> <text class="btn-text">登录</text> </view> <view class="agreements"> <view class="select-icon" @click="is_agree=!is_agree"> <text class="icon" v-if="!is_agree">&#xe8bb;</text> <text class="icon-active" v-if="is_agree">&#xe626;</text> </view> <text class="text">同意</text> <text class="agreement-name" @click="goPrivacyPolicy">《隐私政策》</text> <text class="text">以及</text> <text class="agreement-name" @click="goServiceAgreement">《施工日志App服务协议》</text> </view> </view> </template> <script> let that; export default { data() { return { tab_index:0, is_agree:false, user_phone:'', user_pwd:'', check_code:'' } }, onLoad() { that = this; }, methods: { /*登录*/ login(){ console.log(this.user_phone); console.log(this.user_pwd); if (!this.is_agree){ uni.ajax.toast('请勾选下方登录相关服务选项'); return; } if (!uni.checkRules.checkPhone(this.user_phone)){ uni.ajax.toast('手机号格式不正确'); return; } if (this.user_pwd.length<6){ uni.ajax.toast('密码最少6位'); return; } uni.ajax.post({ url:'/login_register/login', loading:true, data:{ password:that.user_phone, username:that.user_pwd }, success:res=>{ console.log(res); } }); }, /*跳转至忘记密码*/ goForgetPassword(){ uni.navigateTo({ url:'../forget-password/forget-password' }) }, /*跳转至注册*/ goRegister(){ uni.navigateTo({ url:'../register/register' }) }, /*跳转至隐私政策*/ goPrivacyPolicy(){ uni.navigateTo({ url:'../rich-text-page/rich-text-page?page=privacyPolicy' }) }, /*跳转至服务协议*/ goServiceAgreement(){ uni.navigateTo({ url:'../rich-text-page/rich-text-page?page=serviceAgreement' }) } } } </script> <style lang="scss" scoped> .page{ width: 750rpx; @include flex('column'); .logo{ width: 120rpx; height: 120rpx; border-radius: 15rpx; margin-top: 150rpx; margin-bottom: 100rpx; } .account-login-way{ width: 600rpx; height: 100rpx; @include flex('between'); .list{ width: 280rpx; height: 100rpx; @include flex('column-center'); .text{ color: $color-3; font-size: 26rpx; &.active{ color: $color-blue; } } .border{ background-color: #F8F8F8; width: 60rpx; height: 6rpx; border-radius: 3rpx; margin-top: 15rpx; &.active{ background-color: $color-blue; } } } } .input-group{ width: 600rpx; height: 100rpx; @include flex('start'); border-bottom:{ width: 1rpx; style:solid; color: #e0e0e0; } .icon{ @extend %icon-font; color: $color-9; font-size: 36rpx; } .input{ height: 100rpx; flex: 1; margin-left: 10rpx; font-size: 26rpx; } .btn-send{ width: 180rpx; height: 70rpx; background-color: $color-blue; @include flex('center'); border-radius: 8rpx; @include touch-darken($color-blue); .btn-text{ color: white; font-size: 30rpx; } } } .link-box{ width: 600rpx; height: 100rpx; @include flex('between'); margin-top: 20rpx; .left{ height: 100rpx; line-height: 100rpx; color: $color-blue; font-size: 26rpx; } .right{ @extend .left; } } .btn{ @include btn; margin-top: 10rpx; } .agreements{ width: 700rpx; @include flex('start'); margin-top: 20rpx; .select-icon{ width: 80rpx; height: 80rpx; @include flex('end'); .icon{ @extend %icon-font; font-size: 30rpx; margin-right: 10rpx; color: $color-3; } .icon-active{ @extend %icon-font; font-size: 30rpx; margin-right: 10rpx; color: $color-blue; } } .text{ font-size: 26rpx; height: 80rpx; line-height: 80rpx; color: $color-3; } .agreement-name{ font-size: 26rpx; height: 80rpx; line-height: 80rpx; color: $color-blue; } } } </style>

操作步骤:

直接复制我上边的代码,把样式去掉,运行即可复现

预期结果:

密码框和验证码框不同时出现,且任意切换,输入的值不会被传递给下一个

实际结果:

估计是input索引错误,出现了bug

bug描述:

登录页面,用tab_index这个变量控制 是否是账号密码登录,tab_index==0时,显示密码框,tab_index==1时,显示验证码输入框,在tab切换的过程中,user_pwd和check_code这两个值莫名其妙的变成了同一个

2021-09-10 10:34 负责人:无 分享
已邀请:
y***@qq.com

y***@qq.com

给input加不同的key试下

  • 2***@qq.com

    有用,同样的问题,终于解决了


    2022-04-21 16:50

DCloud_UNI_Anne

DCloud_UNI_Anne

  • 1***@qq.com (作者)

    哎,我加你个联系方式,发给你视频吧,现象不好描述,太费劲了,玩呐?


    2021-09-10 11:47

  • 1***@qq.com (作者)

    登录功能,一个是账号密码登录(输入框有账号、密码),另一个是手机号验证码登录(输入框有手机号、验证码),从账号密码登录切换到手机号验证码登录时,密码里边输入的值会莫名其妙的跑到验证码的框子里边,我写了6年多程序了,这个不会是我个人的低级错误,头一次遇到这么古怪的bug,我上传啥例子?你们自己写一个试试就对了,三两分钟就能写完试出来,nvue的页面


    2021-09-10 11:52

1***@qq.com

1***@qq.com (作者) - uni-app使用者

该问题目前已经被锁定, 无法添加新回复