Vuetify: [Bug Report] v-tab with "to" attribute does not change tab contents immediately - it lags one tab click behind

Created on 6 Feb 2018  路  8Comments  路  Source: vuetifyjs/vuetify

Versions and Environment

Vuetify: 1.0.0-beta.6
Vue: 2.5.13
Browsers: Chrome 64.0.3282.140
OS: Mac OS 10.12.6

Steps to reproduce

Create a v-tabs with three v-tab elements that each have a unique "to" attribute.
Please see the Codepen link.

Expected Behavior

  1. Clicking on tab TWO should show the contents of tab TWO
  2. Clicking on tab THREE should show the contents of tab THREE
  3. Clicking on tab TWO again should show the contents of tab TWO again

Actual Behavior

  1. Clicking on tab TWO does nothing.
  2. Clicking on tab THREE shows the contents of tab TWO.
  3. Clicking on tab TWO again shows the contents of tab THREE.

Clicking on tabs lags in updating the v-model linked variable.

Reproduction Link

https://codepen.io/pbastowski/pen/gvwxLp?editors=1000

Other comments

This was working properly in Beta.5. If you change the codepen version of Vuetify to Beta.5 the same code will work as expected.

bug

Most helpful comment

@nasirouwagana

If you need a workaround right now, this is what I did:

    v-tabs(v-model="active_tab")
        v-tab(@click.native.stop="to({ path: '/previous' })") Previous
        v-tab(@click.native.stop="to({ path: '/current' })") Current

Data section:

data() { return {
        active_tab: '',
    }
}

Methods section:

methods: {
    to(route) {
        this.active_tab = route.path
        this.$router.push(route.path)
    }
}

All 8 comments

It probably does need that nextTick after all

@pbastowski I have the same issue

@nasirouwagana

If you need a workaround right now, this is what I did:

    v-tabs(v-model="active_tab")
        v-tab(@click.native.stop="to({ path: '/previous' })") Previous
        v-tab(@click.native.stop="to({ path: '/current' })") Current

Data section:

data() { return {
        active_tab: '',
    }
}

Methods section:

methods: {
    to(route) {
        this.active_tab = route.path
        this.$router.push(route.path)
    }
}

@johnleider
Thanks.
Is there a way for me try the latest commits? Perhaps a continuous integration that auto-publishes to npm a version such as vuetify@nightly or vuetify@hot.

You would need to clone the repository, check out latest dev and link the package locally to your project.

Yeah, I thought so. Thanks again.

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

Was this page helpful?
0 / 5 - 0 ratings