Closed gradyll closed 1 month ago
重现链接无法访问
具体代码如下:
<template>
<div id="app">
<van-button type="primary" @click="change(1)">切换1</van-button>
<van-button type="default" @click="change(2)">切换2</van-button>
状态: {{ active }}
<van-tabs v-model:active="active" shrink>
<van-tab
v-for="(item, idx) in homeTabs"
:key="idx"
:title="item.title"
:name="item.status"
>{{ item.title }}
</van-tab>
</van-tabs>
</div>
</template>
<script setup>
import { ref } from "vue";
const active = ref(1);
const tab_1 = [
{
title: "未完成",
status: 1,
},
{
title: "增项",
status: 5,
},
{
title: "已完成(7日内)",
status: 4,
},
];
const tab_2 = [
{
title: "增项",
status: 5,
},
{
title: "待终检",
status: 2,
},
{
title: "待客户签字",
status: 3,
},
{
title: "已完成(7日内)",
status: 4,
},
];
const homeTabs = ref(tab_1);
const change = (type) => {
if (type == 2) {
homeTabs.value = tab_2;
active.value = 5;
}
if (type == 1) {
homeTabs.value = tab_1;
active.value = 1;
}
};
</script>
<style>
.my-button {
margin: 15px;
}
</style>
看了下,tabs 改变了会在下一帧生效,所以当 active 改变,内部逻辑读取到的还是上一个 tabs 的数据。你可以在 nextTick 中改变 active。 点击 切换 2 没有问题,是恰好 status: 5 在两个 tab 中都存在。你可以把 5 换成其它值,也会有这个问题。
重现链接
https://codesandbox.io/p/devbox/vant-4-issue-template-forked-jclsxq?file=%2Fsrc%2FApp.vue%3A26%2C15&workspaceId=6eb72418-35c0-4894-917d-f207331340c3
Vant 版本
4.9.1
描述一下你遇到的问题。
如demo ,active默认为 “1”,点击“切换 2”,active.value = 5, 选中“增项”,再点击“切换 1”,这是显示的 却是 active.value 为“5”,选中的为“增项”,active.value 并没有变化
重现步骤
如demo ,active默认为 “1”,点击“切换 2”,active.value = 5, 选中“增项”,再点击“切换 1”,这是应该默认 代码 active.value = 1; 显示 “未完成”,但实际情况为:active.value = 5,并没有变化为“1”
设备/浏览器
No response