如何关闭vue-material md-menu？

Question

我想在md-menu组件上的mouseleave事件上调用close。我使用的是0.7.4版本的vue-material库，使用this documentation时，它表示有一个close方法。

如何调用此方法？我尝试过以下几种方法：

<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();
    }
}