使用 VueJS 2.0 和 vue-mdl 菜单组件，如何响应点击事件？

Question

它似乎没有响应 @click 但 v-bind:click 确实注册了。但是，我无法在指令中放置方法，因为我无法访问 mdl-menu 或 mdl-menu-item 组件来添加方法。

我正在尝试使用四个菜单选项（每个选项有不同的 value，相同的 field-name）来做类似 @click="setStatus('field-name', 'value')" 的事情。

我觉得 VueJS 中有一个我还没有意识到的元素，或者 Events 会很有趣。

我尝试添加内联代码 bus.$emit('event', 'data')，但没有任何反应（没有错误，控制台中没有任何内容，没有任何内容）

示例元素：

<span class="bar" v-on:click="clicked">
  <mdl-button icons raised colored
              v-bind:id="generateId('av')"
              v-bind:class="getButtonClass(row.avStatus)"
              v-bind:title="row.avStatus"
  >
      <i class="material-icons">videocam</i>
  </mdl-button>

  <mdl-menu v-bind:for="generateId('av')">
      <mdl-menu-item data-field="avStatus">Open</mdl-menu-item>
      <mdl-menu-item data-field="avStatus">In Progress</mdl-menu-item>
      <mdl-menu-item data-field="avStatus">Review</mdl-menu-item>
      <mdl-menu-item data-field="avStatus">Ready</mdl-menu-item>
  </mdl-menu>
</span>

编辑 1:

所以昨晚我得到了工作的点击事件，但我不确定这是不是正确的方法（感觉很乱）。

我所做的是将 v-on:click="clicked" 侦听器添加到父 span，然后在 clicked() 方法中我有：

if (e.target.className == "mdl-menu__item") { /* code */ }

仅在单击菜单选项时执行。这感觉……不对。我不应该能够直接向菜单选项添加一个侦听器，或者至少到父 mdl-menu?

Answer 1

Use the .native modifier on the click。当在组件上使用 v-on 而不是原生 html 节点时，vue 只会在子组件的自定义事件中查找使用 $emit 声明的事件，添加 .native 将使 vue将其视为本机事件。

使用 VueJS 2.0 和 vue-mdl 菜单组件，如何响应点击事件？

Using VueJS 2.0 and a vue-mdl menu component, how do I respond to click events?

javascript

vue.js

vue-component