[md-tabs] Something about md-active-tab

[Subilan]

Imagine there is a button and two tabs that are ready to be changed dynamically.

<template>
	<div>
            <md-tabs :md-active-tab="activeTab">
                <md-tab id="foo" md-label="foo">A</md-tab>
                <md-tab id="bar" md-label="bar">B</md-tab>
	    </md-tabs>
	    <md-button @click="changeActiveTab('bar')">Click me to show the bar tab</md-button>
	</div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
    data() {
        return {
            activeTab: "foo"
        }
    },
    methods: {
        changeActiveTab(name) {
            this.activeTab = name;
        }
    }
})
</script>

It's clear that the default tab is foo.

Now we click the button, then the bar becomes active. This is pretty normal, right?

Then we click the tab foo and it becomes active. But now if we click the button again we will realize that it can no longer work. That's because activeTab is not changed since we give the same value as before (bar). That also tells that if we change the tab by clicking on the tab (not dynamically), the variable that is bound to md-active-tab won't actually change.

Is this a normal behaviour?

Here is the solution I found.

- <md-tabs :md-active-tab="activeTab">
+ <md-tabs @md-changed="updateTab" :md-active-tab="activeTab">

methods: {
+    updateTab(t) {
+        this.activeTab = t;
+    }
}

Just make the button follow the change of the active tab, then it can be used normally.