Vue.js：在另一个点击事件中分配一个点击动作答案

【问题标题】：Vue.js: Assigning a click action inside another click eventVue.js：在另一个点击事件中分配一个点击动作
【发布时间】：2017-11-04 23:26:39
【问题描述】：

单击“编辑”按钮时，我正在尝试创建编辑模式。该模式应该创建一个保存按钮、一个删除按钮，也许还有更多。

我正在使用 jQuery 创建按钮并尝试为它们分配事件，但是当我分配它时事件处理程序会被触发。我读过一些关于事件传播的问题，但我似乎无法弄清楚如何解决它。

它不仅会被触发，当我尝试点击新按钮时，事件也不会被触发。

这是我的问题的一个孤立示例： https://codepen.io/anon/pen/ooxQXR

我尝试了几种中断传播的方法，但似乎没有任何效果。

e.stopImmediatePropagation();
e.stopPropagation();
e.preventDefault();

关于如何解决这个问题的任何想法？

【问题讨论】：

标签： jquery vue.js vuejs2

【解决方案1】：

在这种情况下，我会忘记 jQuery - 并且在大多数情况下使用 Vue 时。为什么不在模板中使用简单的 if/else 块，例如 this。

<div id="app">
  <button v-if="!editMode" class="first" @click.stop="clickEvent">First</button>
  <template v-else>
      <button class="save">Save</button>
      <button class="delete">Delete</button>
  </template>
</div>

new Vue({
  el: '#app',
  data() {
    return {
      editMode: false
    }
  },
  methods: {
    clickEvent(e) {
      this.editMode = true;
    }
  },
})

向保存/删除按钮添加其他事件处理程序应该不是问题。

【讨论】：