vuematerial - 使用代码触发 md-tabs答案

【问题标题】：vuematerial - trigger md-tabs with codevuematerial - 使用代码触发 md-tabs
【发布时间】：2018-06-20 06:24:56
【问题描述】：

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

我知道我们使用@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 选项卡。

所以我有一个带有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 正在显示），但选项卡没有转到分配的选项卡。

我该如何解决这个问题？

【问题讨论】：

self 变量在activateTab fn 中是什么？是错字吗？ activateTab函数怎么用？
你发现我的错误了！我必须声明 var self=this; 以便 self.currenttab = id; 可以工作。

标签： javascript vuejs2 vue-material

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

我需要在函数中声明self：

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

有了它，我可以用函数触发标签更改。

【讨论】：