5***@qq.com
5***@qq.com
  • 发布:2021-10-15 18:59
  • 更新:2021-10-22 15:35
  • 阅读:812

【报Bug】vue3 下 picker-view-column v-if=false下,change返回的value值中数据仍有占位,造成数据错误

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 3.2.9

浏览器平台: Chrome

浏览器版本: 94.0.4606.81

项目创建方式: HBuilderX

示例代码:
<template>  
    <view>  
        <picker-view :value="value" @change="bindChange" class="picker-view">  
            <picker-view-column v-if="false">  
                <view class="item" v-for="(item, index) in years" :key="item">{{ item }}年</view>  
            </picker-view-column>  
            <picker-view-column>  
                <view class="item" v-for="(item, index) in months" :key="item">{{ item }}月</view>  
            </picker-view-column>  
            <picker-view-column>  
                <view class="item" v-for="(item, index) in days" :key="item">{{ item }}日</view>  
            </picker-view-column>  
        </picker-view>  
    </view>  
</template>  
<script>  
export default {  
    data() {  
        const date = new Date();  
        const years = [];  
        const year = date.getFullYear();  
        const months = [];  
        const month = date.getMonth() + 1;  
        const days = [];  
        const day = date.getDate();  
        for (let i = 1990; i <= date.getFullYear(); i++) {  
            years.push(i);  
        }  
        for (let i = 1; i <= 12; i++) {  
            months.push(i);  
        }  
        for (let i = 1; i <= 31; i++) {  
            days.push(i);  
        }  
        return {  
            years,  
            months,  
            days,  
            // value: [9999, month - 1, day - 1],  
            value: []  
        };  
    },  
    methods: {  
        bindChange(e) {  
            const val = e.detail.value;  
            console.log(val);  
        }  
    }  
};  
</script>  
<style>  
.picker-view {  
    width: 750rpx;  
    height: 600rpx;  
    margin-top: 20rpx;  
}  
.item {  
    height: 39px;  
    align-items: center;  
    justify-content: center;  
    text-align: center;  
}  
</style>  

操作步骤:

滑动日期中的“日”,vue3情况下,因为change获取的e.detail.value值没有空白占位,且v-if=false下,column仍然有占位

预期结果:

在vue3下,picker-view的change事件获取的e.detail.value类似vue2下的正常数组,且picker-view-column v-if=false下,数组数据正常显示

实际结果:

在vue3下,picker-view的change事件获取的e.detail.value数组位数错误,且picker-view-column v-if=false下,数组仍然有占位。

bug描述:

vue2 下 picker-view-column v-if=false下,change获取的e.detail.value值中数据正常,且数据有空白占位
vue3 下 picker-view-column v-if=false下,change获取的e.detail.value值中数据不正常,v-if=false下仍有占位,造成数据错误。

2021-10-15 18:59 负责人:无 分享
已邀请:
DCloud_UNI_LXH

DCloud_UNI_LXH

预计下版修复

DCloud_UNI_LXH

DCloud_UNI_LXH

3.2.11 已修复

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

    vue3下,change下输出e.detail.value会显示“空白占位了”,但是picker-view-column v-if=false下会显示“空白”占位到数组中,而不是不显示……

    2021-11-06 21:03

  • DCloud_UNI_LXH

    回复 5***@qq.com: 预计下版修复

    2021-11-29 17:25

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