carbondodo
carbondodo
  • 发布:2020-10-15 22:55
  • 更新:2020-10-15 23:12
  • 阅读:719

【报Bug】input貌似被复用,value显示错误或者如何清空?

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 2.9.3

手机系统: iOS

手机系统版本号: IOS 14

手机厂商: 苹果

手机机型: iphoneXr

页面类型: vue

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

<template>
<view>
<view class="view-container">
<scroll-view scroll-y="true" class="view-scorll">
<view class="div-view" v-if="stepIndex==0">
<view class="cell-view">
<text class="star-ind"></text>
<text class="left-lable">文本框一</text>
<view class="sep-view"></view>
<input class="value-lable big-width" data-id="landCode" type="text" value="" placeholder="请输入" @blur="textFieldInputed" />
</view>
<view class="cell-view">
<text class="star-ind">
</text>
<text class="left-lable">文本框二</text>
<view class="sep-view"></view>
<input class="value-lable big-width" data-id="code" type="text" value="" placeholder="请输入" @blur="textFieldInputed" />
</view>
<view class="cell-view">
<text class="star-ind"></text>
<text class="left-lable">文本框三</text>
<view class="sep-view"></view>
<input class="value-lable big-width" data-id="boatNation" type="text" value="" placeholder="请输入" @blur="textFieldInputed" />
</view>
</view>
<view class="div-view" v-else-if="stepIndex==1">
<view class="cell-view">
<text class="star-ind">
</text>
<text class="left-lable">文本框一</text>
<view class="sep-view"></view>
<input class="value-lable big-width" data-id="homePhone" type="text" :value="stepData.homePhone" placeholder="请输入家庭电话号码" @blur="textFieldInputed" />
</view>
<view class="cell-view">
<text class="star-ind"></text>
<text class="left-lable">文本框二</text>
<view class="sep-view"></view>
<input class="value-lable big-width" data-id="phone" type="text" :value="stepData.phone" placeholder="港澳手机号码" @blur="textFieldInputed" />
</view>
<view class="cell-view">
<text class="star-ind">
</text>
<text class="left-lable">文本框三</text>
<view class="sep-view"></view>
<input class="value-lable big-width" data-id="nationPhone" type="text" :value="stepData.nationPhone" placeholder="请输入内地手机号码" @blur="textFieldInputed" />
</view>
<view class="cell-view">
<text class="star-ind">*</text>
<text class="left-lable">文本框四</text>
<view class="sep-view"></view>
<input class="value-lable big-width" data-id="nationPhone" type="text" :value="stepData.nationPhone" placeholder="请输入内地手机号码" @blur="textFieldInputed" />
</view>
</view>
</scroll-view>
<view v-if="stepIndex<3" class="next-view" style="width:100%;left: 0;" @click="nextStepAction">
<text class="l-title">下一步</text>
</view>
</view>
</view>
</template>

<script>

export default {  
    data() {  
        return {  

            stepData: {  
            },  
            stepIndex: 0,  
        };  
    },  
    onLoad(options) {  
        this.initData()  
    },  
    computed: {  
    },  
    methods: {  
        initData: function() {  

        },  
        textFieldInputed: function(e) {  
            let key = e.currentTarget.dataset.id  
            let value = e.detail.value  
            this.stepData[key] = value  
        },  
        nextStepAction: function() {  
            this.stepIndex = Math.min(1,this.stepIndex+1)  
        }  
    }  
}  

</script>

<style lang="less">
.view-navbar {
position: fixed;
width: 100%;
height: calc(var(--status-bar-height) + 44px);
z-index: 2;
background-color: white;
border-bottom: 1upx solid rgb(245, 245, 245);

    .nav-view {  
        position: absolute;  
        top: var(--status-bar-height);  
        width: 100%;  
        height: 44px;  

        display: flex;  
        flex-direction: row;  
        justify-content: center;  
        align-items: center;  

        .back-view {  
            position: absolute;  
            top: 12px;  
            left: 15px;  
            width: 18px;  
            height: 18px;  

            z-index: 100;  
        }  

        .nav-title {  
            position: absolute;  
            width: 100%;  
            height: 44px;  
            line-height: 44px;  
            color: black;  
            font-size: 18px;  

            text-align: center;  
            box-sizing: 1;  
        }  
    }  
}  

.view-container {  
    position: fixed;  
    top: calc(var(--status-bar-height) + 44px);  
    // bottom: 0;  
    height: calc(100% - var(--status-bar-height) - 44px);  
    width: 100%;  
    z-index: 1;  

    overflow-y: hidden;  

    display: flex;  
    flex-direction: column;  
    justify-content: flex-start;  
    align-items: center;  

    .view-scorll {  
        position: relative;  
        width: 100%;  
        height: calc(100% - 230upx - 88upx);  

        .div-view {  
            position: absolute;  
            width: 100%;  
            // height: 100upx;  

            display: flex;  
            flex-direction: column;  
            justify-content: flex-start;  
            align-items: center;  

            .cell-view {  
                position: relative;  
                width: calc(100% - 44upx);  
                height: auto;  

                border-bottom: 1upx solid rgb(245, 245, 245);  

                display: flex;  
                flex-direction: row;  
                justify-content: flex-start;  
                align-items: center;  

                .left-lable {  
                    position: relative;  
                    width: 240upx;  
                    font-size: 32upx;  
                    left: 15upx;  
                    color: rgba(52, 52, 52, 1);  
                    min-width: 240upx;  
                }  

                .star-ind {  
                    position: relative;  
                    left: 15upx;  
                    color: red;  
                    width: 15upx;  
                    font-size: 16upx;  
                }  

                .value-lable {  
                    position: relative;  
                    height: 100upx;  
                    line-height: 100upx;  
                    font-size: 32upx;  
                    color: rgba(154, 154, 154, 1);  
                    text-align: right;  

                    display: flex;  
                    flex-direction: row;  
                    justify-content: flex-end;  
                    align-items: center;  

                    .check-box {  
                        position: relative;  
                        width: 45%;  
                        height: 100%;  

                        display: flex;  
                        flex-direction: row;  
                        justify-content: center;  
                        align-items: center;  

                        image {  
                            position: relative;  
                            width: 40upx;  
                            height: 40upx;  
                        }  

                        text {  
                            position: relative;  
                            padding-left: 14upx;  
                            font-size: 28upx;  
                            color: black;  
                        }  
                    }  
                }  

                .vl-width {  
                    width: calc(100% - 240upx - 26upx - 24upx);  
                }  

                .big-width {  
                    width: calc(100% - 240upx - 21upx - 24upx);  
                }  

                .sgg-width {  
                    width: calc(100% - 240upx - 115upx);  
                }  

                .right-ic {  
                    position: relative;  
                    left: 24upx;  
                    width: 26upx;  
                    height: 26upx;  
                }  

                .right-uts {  
                    position: relative;  
                    left: 24upx;  

                    font-size: 32upx;  
                    color: black;  
                }  

                .sep-view {  
                    position: relative;  
                    width: 1upx;  
                    height: 65%;  
                    background-color: rgb(245, 245, 245);  

                    margin-left: 10upx;  
                    margin-right: 10upx;  
                }  

                .v-input {}  
            }  

            .tip-view {  
                position: relative;  
                width: calc(100% - 44upx);  

                padding: 20upx 0upx;  

                .tip-ic {  
                    position: relative;  
                    width: 104upx;  
                }  

                .tip-text {  
                    position: relative;  
                    font-size: 22upx;  
                    color: black;  
                }  
            }  

            .sep-view {  
                width: 100%;  
                height: 22upx;  

                background-color: rgb(245, 245, 245);  
            }  

            .photo-view {  
                position: relative;  
                width: calc(100% - 44upx);  
                height: auto;  
                padding-bottom: 20upx;  

                .sect-view {  
                    position: relative;  
                    width: 100%;  
                    height: 104upx;  
                    line-height: 104upx;  

                    font-size: 30upx;  
                    color: black;  
                }  

                .php-view {  
                    position: relative;  
                    width: 100%;  
                    height: 200upx;  

                    display: flex;  
                    flex-direction: row;  
                    justify-content: space-between;  
                    align-items: center;  

                    .one-php {  
                        position: relative;  
                        width: calc(50% - 17upx);  
                        height: 100%;  

                        background-color: rgb(239, 248, 255);  

                        border-radius: 16upx;  

                        display: flex;  
                        flex-direction: column;  
                        justify-content: center;  
                        align-items: center;  

                        .cer-ic {  
                            position: absolute;  
                            width: 100%;  
                            height: 100%;  

                            border-radius: 16upx;  
                        }  

                        .cer-ic-indi {  
                            position: relative;  
                            width: 42%;  
                        }  

                        .cer-text {  
                            position: relative;  
                            width: 100%;  
                            padding-top: 12upx;  

                            font-size: 24upx;  
                            color: rgba(13, 98, 255, 1);  

                            text-align: center;  
                        }  
                    }  
                }  
            }  

            .apply-sign-view {  
                position: relative;  
                width: calc(100% - 44upx);  
                height: 88upx;  
                line-height: 88upx;  

                display: flex;  
                flex-direction: row;  
                justify-content: space-between;  
                align-items: center;  

                .l-title {  
                    position: relative;  
                    font-size: 32upx;  
                    color: black;  
                }  

                .to-sign-view {  
                    position: relative;  

                    display: flex;  
                    flex-direction: row;  
                    justify-content: center;  
                    align-items: center;  

                    .icon {  
                        width: 30upx;  
                        height: 30upx;  

                        margin-right: 12upx;  
                    }  

                    .text {  
                        font-size: 26upx;  
                        color: rgba(13, 98, 255, 1);  
                    }  
                }  
            }  

            .sign-view {  
                position: relative;  
                width: calc(100% - 44upx);  
                height: 130vw;  
                margin: 44upx 0upx;  
                display: flex;  
                flex-direction: column;  
                justify-content: center;  
                align-items: center;  

                background-color: rgba(239, 248, 255, 1);  
                border: 1upx solid rgba(0, 144, 255, 1);  

                border-radius: 12upx;  

                .sign-text {  
                    font-size: 74upx;  
                    color: rgb(208, 223, 255);  

                    text-align: center;  
                    font-weight: bold;  
                }  

                canvas {  
                    position: absolute;  
                    background-color: transparent;  
                    width: 100%;  
                    // margin: 0 25upx;  
                    height: 100%;  
                }  
            }  
        }  
    }  

    .next-view {  
        position: relative;  
        width: 100%;  
        height: 88upx;  
        line-height: 88upx;  
        // margin: 22upx 0upx;  

        text-align: center;  
        background-color: rgb(12, 97, 255);  
        color: white;  
        font-size: 26upx;  
    }  

    .sign-btn-view {  
        position: relative;  
        width: 100%;  
        height: 100upx;  

        display: flex;  
        flex-direction: row;  
        justify-content: center;  
        align-items: center;  

        .re-sign-btn {  
            position: relative;  
            width: 50%;  
            height: 100upx;  
            line-height: 100upx;  

            font-size: 34upx;  
            color: black;  

            text-align: center;  
        }  

        .ok-sign-btn {  
            position: relative;  
            width: 50%;  
            height: 100upx;  
            line-height: 100upx;  

            font-size: 34upx;  
            color: white;  

            background-color: rgba(0, 144, 255, 1);  
            text-align: center;  
        }  
    }  
}  

</style>

操作步骤:

如代码

预期结果:

第二步的页面中并未输入任何信息,为啥会有显示文字?

实际结果:

如代码

bug描述:

同一个页面,分为不同的子步骤输入数据。比如页面中有两步,第一步要输入3个输入信息并在input中输入信息后,点击下一步,要再显示4个输入框录入其他4个信息,这个时候,并未在第二步的input输入任何信息,但是却显示了第一步3 个的input的值。注意看附件源码。

2020-10-15 22:55 负责人:无 分享
已邀请:
MrWos

MrWos - 前端工程师

uni 直接用 v-model 写,不用小程序语法去写

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