How to cancel parent event on click on child element with own event?

Question

Vue.js

There are slides

<div
                        class="slider__slide js-slide pad-6"
                        v-for="slide in sliderList"
                        :key="slide.id"
                        :style="'background-image: url(' + slide.img + ')'"
                        @click="openSlide(slide.id + 1)"
                    >
                        <div
                            class="slide-content"
                        >
                            <h1>{{ slide.title }}</h1>
                            <p class="mar-bot-6">
                                {{ slide.text }}
                            </p>
                            <span class="badge-course pad-3 d-inline-block"
                            >
                                {{ slide.badge }}
                            </span>
                            <div class="mar-top-8">
                                <button class="btn btn-primary btn-course" @click="joinCourse">
                                    Записаться на курс
                                </button>
                            </div>
                        </div>
                    </div>

By clicking on each slide, I switch to the next slide. Each slide has a button with its own event. How to undo slide switching i.e. top event on button click?

Answer 1

https://ru.vuejs.org/v2/guide/events.html

Answer 2

@click.stop="joinCourse"