Impossible to set :md-active-tab when using :to
remi-blaise opened this issue · 0 comments
remi-blaise commented
Steps to reproduce
<md-tabs :md-active-tab="activeTab">
<md-tab id="Studio" :to="{ name: 'Studio' }" md-icon="store"></md-tab>
<md-tab id="Orders" :to="{ name: 'Orders' }" md-icon="paid"></md-tab>
</md-tabs>
What is expected?
:md-active-tab
value should overrule, especially if md-sync-route = false
.
What is actually happening?
:md-active-tab
value is ignored.
Workaround
<script>
export default {
computed: {
activeTab() {
return this.$router.currentRoute.path.startsWith('/orders') ? 'paid' : 'store'
},
},
methods: {
updateActiveTab() {
setTimeout(() => {
const i = document.querySelectorAll('.md-tabs-navigation i')
for (const o of i) {
o.style.color = this.activeTab === o.textContent ? '#448aff' : 'black'
}
})
},
},
mounted() {
this.updateActiveTab()
},
updated() {
this.updateActiveTab()
},
}
</script>