fix(v-tab): anchor hash routing

[amritk]

Description

Just a minor fix for the href attribute on v-tab when using hash urls. Originally it prevents default, but I believe that the intention was to only prevent default when the url is exactly '#'. In the case of using hash urls for the tab, this will not work.

Motivation and Context

I had this issue open for a while to see why this code was here in the first place, after no feedback decided to fix it as I am going live with a feature that is using this soon.
#4784

How Has This Been Tested?

I have tested that it works visually in my project, not quite sure how to write a test for this one.

Markup:

<template lang="pug">
.main
    v-tabs.shadow(v-model="activeTab" slider-color="primary" fixed-tabs)
        v-tab(v-for="tab in tabs" :key="tab.name" :href="`#${tab.name}`")
            | {{ $t(tab.title) }}
        v-tab-item(id="teams")
            | These are the teams
        v-tab-item(id="players")
            | These are the players
        v-tab-item(id="matches")
            | These are the matches
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import * as VTabs from 'vuetify/es5/components/VTabs'

@Component({
    components: {
        ...VTabs
    }
})
export default class TeamFinderList extends Vue {
    activeTab: string = null
    tabs = [
        {
            name: 'teams',
            title: 'Teams'
        },
        {
            name: 'players',
            title: 'Players'
        },
        {
            name: 'matches',
            title: 'Matches'
        }
    ]

    created () {
        // Load the correct tab in the beinning
        this.activeTab = this.$route.hash.substr(1)
    }
}
</script>

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Improvement/refactoring (non-breaking change that doesn't add any feature but make things better)

Checklist:

• The PR title is no longer than 64 characters.
• The PR is submitted to the correct branch (master for bug fixes, dev for new features and breaking changes).
• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have created a PR in the documentation with the necessary changes.

[johnleider]

Tabs are about to be updated for v1.3, I'll revisit this once I move to that component in a few days.

[amritk]

sounds good

[egeersoz]

Is this still slated for 1.3.0? A critical part of my app requires switching tabs using the URL.

[KaelWD]

This doesn't fix anything: you still can't link directly to a tab by its hash, and clicking a tab scrolls the page to the top of the tab item (https://vuetifyjs.com/en/components/alerts#props)

[amritk]

@KaelWD I had a working example. Let me try out the fix tomorrow and I'll see if it still works.

[amritk]

@KaelWD This fix was to set the hash fragment in the url, which it correctly does now. Not sure why the scrolling is happening. To set it initially, on mounted you can do something like this:

this.activeTab = this.$route.hash.substr(1)

Not sure if we want to include this as part of the tabs component.

Actually that is probably why this code was in here in the first place, to prevent the scrolling in the docs. Maybe we should keep the routing but prevent the scroll.

I threw up a working example here:
https://hockeycommunity.com/explore/amrit

<template lang="pug">
    v-tabs(v-model="activeTab" slider-color="primary" fixed-tabs)
        v-tab(v-for="tab in tabs" :key="tab" :href="`#${tab}`")
            | {{ tab }}
        v-tab-item(:id="tab" v-for="tab in tabs" :key="tab")
            | This is the {{ tab }} feed
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import * as VTabs from 'vuetify/es5/components/VTabs'

@Component({
    components: {
        ...VTabs
    }
})
export default class Amrit extends Vue {
    activeTab: string = null
    tabs = ['teams', 'players', 'matches']

    mounted () {
        const tab = this.$route.hash.substr(1) || 'teams'
        this.activeTab = tab
    }
}
</script>

[amritk]

I just realized if you use router-link instead of an achor it works much better, including linking directly to the tab

<template lang="pug">
    v-tabs(v-model="activeTab" slider-color="primary" fixed-tabs)
        v-tab(v-for="tab in tabs" :key="tab" :to="`#${tab}`")
            | {{ tab }}
        v-tab-item(:id="tab" v-for="tab in tabs" :key="tab")
            | This is the {{ tab }} feed
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import * as VTabs from 'vuetify/es5/components/VTabs'

@Component({
    components: {
        ...VTabs
    }
})
export default class Amrit extends Vue {
    activeTab: string = null
    tabs = ['teams', 'players', 'matches']
}
</script>

[KaelWD]

Correct. You could've also set the hash yourself with a watcher on activeTab, seeing as you're already doing this.activeTab = this.$route.hash.substr(1) in userland.

[amritk]

Yes that is what I was doing while I was waiting for the pull request. But the tabs component should be handling that.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord