[Bug Report] v-tab v-model not updating

[Avatar45com]

Versions and Environment

Vuetify: 1.3.0
Last working version: 1.2.7
Vue: 2.5.17
Browsers: Chrome 70.0.3538.67
OS: Linux x86_64

Steps to reproduce

1. create a v-tabs
2. assign the v-model to an variable.
3. create the v-tabs using an for (n in array).
4. add a button to add a new value in the array from step 3.
5. when a new value is added change the v-model variable to the length of the array - 1.

Expected Behavior

v-tab at the last position will be selected.

Actual Behavior

v-tab selection does not change.

Reproduction Link

https://codepen.io/Avatar45com/pen/OBQdKr

Other comments

The only way this works now is using nextTick. if you change the v-model variable within nextTick the model updates as expected.

[DRoet]

Maybe related, but I've also noticed a performance regression on 1.3.0 on initial load. The slider will appear a lot slower (100ms or more depending on the speed of the device)

simple codepen: https://codepen.io/anon/pen/vVjpro?&editors=101

[pbastowski]

@Avatar45com
I have the same issue and found this temporary workaround using $nextTick(). But, yeah, it's a bug indeed.

 <v-tabs v-model="active">
    <v-tab v-for="tab in tabs">
...
    </v-tab>
</v-tabs>
...
<v-btn @click="tabs.push(tabs.length+1); $nextTick(()=>active=tabs.length-1)">Add tab</v-btn>

if I set active without using $nextTick then active resets to the first tab.

[johnleider]

This is happening due to the introduction of updateItemState being called in a watcher. This is why nextTick currently works. Working on a solution.

update: The reason why nextTick works is because it was missing from the internalValue watcher.

[pbastowski]

@johnleider Thanks, that did it 👍

There is another issue, however, which may be related to this one. When I add more tabs that can fit in the width of the tabs bar, and the scroll arrows show, the first new tab does not scroll into view.

Here is a link to a repro: https://codesandbox.io/s/347ypvzo46

If you keep clicking the plus button at the end of the tabs bar you will notice that tab 8 is mostly hidden, see image below.

If you add another tab, tab nine on my screen, then it is fully revealed.

I have a workaround for this right now, see the code below. tabs is an array, which I use to render each v-tab. When the array's length increases I scroll the new tab into view using scrollIntoView(), but only after 700ms have passed, otherwise it does not work (it could be something to do with the animation, I guess).

    watch: {
        /*
            Fix for the hidden new tab problem. 
            Always scroll the last added tab into view
         */
        'tabs.length'(nv, ov) {
            if (!this.$refs.tabs) return  // $refs doe not exist until mounted
            setTimeout(() => {
                if (nv === ov + 1)
                    try {
                        this.$refs.tabs.$el
                            .querySelector('.s-tab:last-child')
                            .scrollIntoView(false)
                    } catch (e) {
                        // silently ignore
                    }
            }, 700)
        }
    },

[Avatar45com]

Can you reopen this issue. I think it is also affecting the v-window model as well

[johnleider]

Please do not comment on closed issues. If you have a bug, please create a new issue, https://issues.vuetifyjs.com or seek help in our community, https://community.vuetifyjs.com