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

Question

我试图在单击 "Edit" 按钮时进入编辑模式。该模式应该创建一个保存按钮、一个删除按钮，也许还有更多。

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

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

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

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

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

关于如何解决这个问题有什么想法吗？

Answer 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;
    }
  },
})

向 save/delete 按钮添加其他事件处理程序应该不是问题。

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

Vue.js: Assigning a click action inside another click event

jquery

vue.js

vuejs2