Блог

Вот что я пытаюсь, так это то, что у меня есть динамические данные, и их отображение в разделе, а раздел доступен для просмотра, и под ним у меня есть 2 кнопки под названием edit, del после нажатия этих кнопок также должно быть запущено какое-то действие.

Проблема, с которой я сталкиваюсь, заключается в том, что, несмотря на то, что я нажимаю действие редактирования, но нажатие кнопки раздела также срабатывает, и я попытался поставить @click.prevent, все еще сталкиваясь с проблемой.

что мне нужно, так это всякий раз, когда я нажимаю «Редактировать» или «удалить», действие раздела не должно запускаться. ниже приведен мой URL-адрес песочницы кода

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

код

 <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>
 

Это проблема распространения событий, .prevent не останавливайте распространение, используйте .stop вместо prevent . Пример обновления здесь

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