javascript - vuematerial - 使用代码触发 md-tabs

Question

我在我的新项目中使用[md-tabs][1]from 。vue-material

我了解我们将@md-changed事件与js函数一起使用：

<template>
  <div class="hello">
<md-tabs class="md-primary" :md-active-tab="currenttab" @md-changed="tabChanged">
<md-tab id="tab-users" md-label="Users">
...
</md-tab>
<md-tab id="tab-projects" md-label="Projects">
...
</md-tab>
</md-tabs>
</div>
</template>

<script>
...
methods: {
      tabChanged: function(id) {
        console.log(id);
      },
}
...
</script>

但是如何创建一个函数来触发 md-tab 更改？

有一个props md-active-tab说明：

设置当前选定的选项卡。通过提供所需 md-tab 的 id 来工作。

所以我有一个js功能按钮：

activateTab: function(id) {
        console.log(id);
        self.currenttab = id;
      }

与以下内容currenttab绑定：

<md-tabs class="md-primary" :md-active-tab="currenttab" @md-changed="tabChanged">

但是当我单击按钮时，该功能有效（正在显示console.log），但该选项卡没有转到分配的选项卡。

我该如何解决这个问题？

Answer 1

我无法有效地解决，因此，我有以下解决方法。

document.querySelectorAll(".md-tabs > div > button")[_index].click();

Answer 2

@Max Sinev 指出的一个非常基本的错误。

我需要self在函数中声明：

activateTab: function(id) {
        var self = this;// <-- declare self
        console.log(id);
        self.currenttab = id;
      }

有了它，我可以用功能触发标签更改。