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

Question

I'm trying to make an edit mode when clicking on an "Edit" button. The mode should create a Save-button, a Delete-button and maybe something more.

I'm using jQuery to create the buttons and I'm trying to assign events to them, but the event handler gets fired when I assign it. I've read something about event propagation is the problem, but I can't seem to figure out how to solve it.

Not only does it get triggered, when I try to click the new button, the event is not fired.

Here's an isolated example of my problem: https://codepen.io/anon/pen/ooxQXR

I've tried several methods of interupting the propagation, but nothing seems to work.

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

Any ideas on how to solve this?

Community · Accepted Answer · 2020-06-20 09:12:55Z

4

I would forget about jQuery in this situation - and in most situations when using Vue. Why not use a simple if/else block in the template, like 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;
    }
  },
})

Adding other event handlers to the save/delete buttons should not be a problem then.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Nov 4, 2017 at 23:37

8bit

5975 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related