Question

我在新项目中使用[md-tabs][1]中的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的说明：

设置当前选择的标签。通过提供所需的ID工作 md-tab。

所以我有一个带有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

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

我需要在函数中声明self：

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

那样，我可以通过功能触发选项卡更改。

Answer 2

我无法有效解决问题，因此，下面有解决方法。

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

vuematerial-使用代码

2 个答案: