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

Question

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

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

我觉得要么有一个我还不知道的 VueJS 元素，要么它会成为 Event 的奇特之处。

我尝试添加内联代码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 ：

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

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

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

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

Answer 1

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