Disable propagation of click handle to child in vue 2

Question

Using this markup

<div @click='handleClickOnDiv'>
    {{ message }}
    <i class='fa fa-plus' @click='handleClickOnI'></i>
</div>

When I click on div - it calls handleClickOnDiv, but when I click on i - it calls both handlers.

How to deal with it?

Answer 1

Try Event-Modifiers with @click, you can do following:

<div @click='handleClickOnDiv'>
    {{ message }}
    <i class='fa fa-plus' @click.stop='handleClickOnI'></i>
</div>