Question

点击＆＃34;编辑＆＃34;我试图进行编辑模式。按钮。该模式应该创建一个保存按钮，一个删除按钮，可能还有更多。

我使用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;
    }
  },
})

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

Vue.js：在另一个点击事件

1 个答案: