youzan / vant

A lightweight, customizable Vue UI library for mobile web apps.
https://vant.pro/vant/
MIT License
23.19k stars 9.49k forks source link

Tabbar 标签栏指定name的他又乱选中了 #3502

Closed shijunti19 closed 5 years ago

shijunti19 commented 5 years ago

IMPORTANT: Please use the following link to create a new issue. If your issue was not created using the app above, it will be closed immediately.

注意:请按照下面的模板来新建 issue,不规范的 issue 会被立即关闭。

Describe the bug 描述问题 2个页面来回切换,我指定了name,他还是乱选中 你看下面的active的值当list的时候我切换回去的时候他选中了home根本没匹配,我没主动赋值,是本身的点击赋值的,纯粹2个页面来回切换根据变量判断的

注意,第一个图标我有if判断的(不是常规的一直显示的,当0的时候他可能是home也可能是list) Screenshots 截图 image image

Environment 环境 什么都是最新的

Reproduce 复现步骤 代码太多了,我不弄 请使用 codesandbox 创建一个复现问题的示例,以帮助我们排查问题。

zehuichan commented 5 years ago

为什么不直接用computed计算属性呢 image

shijunti19 commented 5 years ago

@jasconchen 我是觉得没必要多写这么多代码去优化,按逻辑,这就是组件本身的功能啊!

zehuichan commented 5 years ago

v-if的问题 我的解决方案是写两个tabbar,然后通过vuex全局控制

chenjiahan commented 5 years ago

没看懂你的描述,建议提供一个最简的 codesandbox

shijunti19 commented 5 years ago

@chenjiahan image 主要问题: active的当前值是list,但是如图他在home这个上高亮。 image 应该第二个高亮因为name=list 介绍: 有个Tabbar,第一个主页name=home,第二个列表name=list,第三个页面文章name=page,我点三个时候,第一个会隐藏,我点第二个跳到list的时候home第一个会显示。 操作: 现在我点第3个页面,我第一个home会隐藏,list会变成第一个,这时候我点第一页list,回到之前页面,这时候home显示出来,组件会高亮6他,其实错误的,应该高亮第二个list,因为这时候第一个v-if判断显示了

chenjiahan commented 5 years ago

我试了下没问题,请确认你使用的是 2.0 版本,且用法和文档一致

shijunti19 commented 5 years ago

@chenjiahan 不行的话,我再研究下,到底怎么回事。 而且我发现,其实,有时候点击他确实对的,然后我来回快速点的话,基本都是第一个选中 "vant": "^2.0.0",

<script>
import { Tabbar, TabbarItem } from 'vant'
export default {
    name: 'Tabbar',
    data() {
        return {
            data: [],
            active: ''
        }
    },
    components: {
        VanTabbar: Tabbar,
        VanTabbarItem: TabbarItem
    },
    mounted() {
        this.index()
    },
    methods: {}
}
</script>
 <van-tabbar v-model="active">
        <van-tabbar-item name="home" v-if="!$route.query.team" icon="notes-o" :to="{ name: 'index' }">
            主页
        </van-tabbar-item>
        <van-tabbar-item name="list" icon="user-circle-o" :to="{ name: 'team_list' }">
            门派列表
        </van-tabbar-item>
        <van-tabbar-item
            name="team"
            v-if="$route.query.team"
            icon="user-circle-o"
            :to="{ name: 'team_index', query: { team: $route.query.team } }"
        >
        门派
        </van-tabbar-item>
    </van-tabbar>