Coding Challenge: Event Handling

Problem

In the below provided Vue app, there are five buttons inside a div. All buttons and the div have v-on:click event listeners that display alerts with a customized message. When the buttons are clicked, the event handler of the buttons is triggered but after that, the event handler of the parent div is also triggered.

Prevent the event handler of parent div to trigger only when any of the buttons are clicked. One means of accomplishing this is to use the .stop modifier with all the buttons. But in this case, modifiers need to be used with all buttons.

This task can also be carried out in a much simpler way by using only one event modifier. Try performing this without using .stop with all the child elements (buttons).