如何关闭Vue材质的md菜单？

Question

我想在mouseleave组件上的md-menu事件上调用close。我正在使用vue-material库的0.7.4版，并使用this documentation表示存在一个关闭方法。

如何调用此方法？我尝试了以下方法：

<md-menu md-size="1" ref="aRef" id="aRef">
  <div @mouseleave="this.$refs['aRef'].close()">
  ...other stuff...
</md-menu>

运行此命令时，我收到一条错误消息：

Uncaught TypeError: Cannot read property 'aRef' of undefined

我猜测这与组件在创建时不可用有关。正确的方法是什么？

我应该说md-menu实际上是嵌套在另一个md-menu内的（从功能的角度来看似乎可行）。不确定是否会破坏事件层次结构。

Answer 1

我在尝试解决另一个问题（在打开另一个菜单之前如何关闭其他菜单）时偶然发现了该解决方案。

您的问题是您不能在html模板中直接使用this内联。您需要将事件发送给方法，然后调用它...

<md-menu 
    ref="aRef"
    @mouseleave="closeMenu"
>
    // menu contents

</md-menu>

然后在脚本部分：

methods: {
    closeMenu() {
        this.$refs['aRef'].close();
    }
}