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

【报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"></text>
<input class="input" type="number" v-model="user_phone" placeholder="请输入手机号"/>
</view>
<view class="input-group" v-if="tab_index==0">
<text class="icon"></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"></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"></text>
<text class="icon-active" v-if="is_agree"></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使用者

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