Unable to use prevent default option on button click using Vue.js

Question

Here what I am trying is I have dynamic data and displaying it in section and section is clickable and under that, I have 2 buttons called edit, del after clicking those buttons also it should trigger some action.

The problem I am facing is even though I am clicking edit action but the section button click also getting triggered and I tried putting @click.prevent still facing the issue.

what I need is whenever I click on edit or del the section action should not trigger below is my code sandbox URL

https://codesandbox.io/s/vuejs-with-import-json-example-forked-tjn45?fontsize=14&hidenavigation=1&theme=dark

code

<template>
  <div>
    <section
      style="border-style: dotted"
      v-for="(name, index) in names"
      :key="index"
      @click.prevent="methodOne"
    >
      <div>
        <button @click.prevent="edit">Edit</button>
        <button @click="del">Del</button>
      </div>
      <div>
        {{ name }}
      </div>
    </section>
  </div>
</template>

<script>
import states from "../assets/data.json";
export default {
  name: "HelloWorld",
  computed: {
    names() {
      return states.accounts.map((item) => {
        return item.name;
      });
    },
  },
  methods: {
    methodOne() {
      alert("Method One");
    },
    edit() {
      alert("Edit");
    },
    del() {
      alert("DELETE");
    },
  },
};
</script>

Penny Liu · Accepted Answer · 2022-11-01 06:37:08Z

2

This is event propagation issue, .prevent don't stop the propagation, Use .stop instead of .prevent. Update example here

<div>
  <button @click.stop="edit">Edit</button>
  <button @click.stop="del">Del</button>
</div>

edited Nov 1, 2022 at 6:37

Penny Liu

17.9k5 gold badges89 silver badges109 bronze badges

answered Jan 5, 2021 at 10:15

Naren

4,5293 gold badges20 silver badges32 bronze badges

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

Collectives™ on Stack Overflow

Unable to use prevent default option on button click using Vue.js

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