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

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

开发环境 版本号 项目创建方式
Windows 10 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下仍有占位,造成数据错误。


更多关于uni-app 【报Bug】vue3 下 picker-view-column v-if=false时,change返回的value值中数据仍有占位,造成数据错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

预计下版修复

更多关于uni-app 【报Bug】vue3 下 picker-view-column v-if=false时,change返回的value值中数据仍有占位,造成数据错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html


3.2.11 已修复

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

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

这是一个已知的 Vue3 兼容性问题。在 Vue3 中,picker-view-column 使用 v-if="false" 时,change 事件返回的 value 数组仍然会包含该列的占位索引,导致数据错位。

问题分析:

  • Vue2 中,v-if="false" 的列会被完全移除,value 数组只包含实际显示的列索引
  • Vue3 中,即使列被隐藏,picker-view 内部仍会为其保留位置,导致 value 数组长度与实际列数不匹配

临时解决方案:

  1. 使用 v-show 替代 v-if
<picker-view-column v-show="false">
  1. 动态过滤 value 数组
bindChange(e) {
    const columns = this.$refs.picker.$children.filter(col => col.visible);
    const actualValues = e.detail.value.slice(0, columns.length);
    console.log(actualValues);
}
  1. 条件渲染整个 picker-view
<picker-view v-if="showPicker" :value="value" [@change](/user/change)="bindChange">
回到顶部