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
预计下版修复
更多关于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数组长度与实际列数不匹配
临时解决方案:
- 使用
v-show替代v-if:
<picker-view-column v-show="false">
- 动态过滤 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);
}
- 条件渲染整个 picker-view:
<picker-view v-if="showPicker" :value="value" [@change](/user/change)="bindChange">

