vuematerial/vue-material

Impossible to set :md-active-tab when using :to

remi-blaise opened this issue · 0 comments

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>