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

【问题标题】：Using VueJS 2.0 and a vue-mdl menu component, how do I respond to click events?使用 VueJS 2.0 和一个 vue-mdl 菜单组件，如何响应点击事件？
【发布时间】：2016-11-17 00:27:26
【问题描述】：

它似乎没有响应@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：

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

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

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

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

【问题讨论】：

能否添加相关代码段或创建一个jsfiddle。

标签： javascript vue.js vue-component

【解决方案1】：

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

【讨论】：