setActiveTab in UiTabs doesn't work in mounted() hook

[Alona2156]

I need to change selected tab programmatically when navigating to component containing UiTabs. Once the component is mounted I should have access to this.$refs, but when UiTabs call findTabById(id) this line this.$refs.tabHeaders.length tells "TypeError: Cannot read property 'length' of undefined"

[JosephusPaye]

There's another ref in UiTabs for the tab headers. I'm guessing that when your mounted hook is called that ref isn't ready yet.

From the docs, it says:

Note that mounted does not guarantee that all child components have also been mounted. If you want to wait until the entire view has been rendered, you can use vm.$nextTick inside of mounted:

So you can wrap your call to findTabById() in $nextTick():

mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}

[Alona2156]

Unfortunately that didn't solve the issue, I still have the same error. I understand that all views must be rendered and available inside nextTick, but that's not the case.

[JosephusPaye]

Hmmm, don't know why the internal component refs are not available in mounted + nextTick.

Does it work when you run it a little bit after mounting? E.g. with a button that you click to change the active tab. If so then it's definitely a refs rendering issue, and you could use a short (maybe 300ms) timeout in mounted to change the active tab, as a workaround.

Need to figure out what's going wrong with the refs though and fix that.

[Alona2156]

Yes, after mounting it works fine, I'm watching a value in Vuex, when it changes I change tab programmatically. That works quite fine. The problem appears only inside mounted hook. If the app is entered not on main route, but on a route that corresponds to a certain tab, I need the tab to change accordingly. Currently I use 1s timeout to avoid getting error, but that's more like a hack than solution. And sometimes I still see an error, so 1s is not always working.