vuejs stop propagation of click when clicked outer div - laravel

Question

I am trying to create a search show hide feature. I have a click event that shows the search bar, but if I click somewhere in the put it get removed again. I tried with click.stop but it doesn't work. I am using vue.js inside a laravel project.
Here is my code
<template>
<div>
<div class="menu_srch d-flex" #click.stop="dos">
<i class="fa fa-search search_btn"></i>
<div class="header_serch " v-if="showSearch">
<div class="header_serch_input">
<input type="" name="" placeholder="Search">
</div>
<div class="header_serch_i">
<i class="fa fa-search"></i>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
showSearch : false,
}
},
methods: {
dos(){
this.showSearch = !this.showSearch
}
},
}
</script>
using click.self doesn't even work.. dos method doesn't run when click.self is used.
Vue.js version : "^2.6.11"

Answer 1

You can capture the click event end to stop the propagation one level down.
<template>
<div>
<div class="menu_srch d-flex" #click="dos">
<i class="fa fa-search search_btn"></i>
<div #click.stop class="header_serch" v-if="showSearch">
<div class="header_serch_input">
<input type name placeholder="Search">
</div>
<div class="header_serch_i">
<i class="fa fa-search"></i>
</div>
</div>
</div>
</div>
</template>
Or you need to restructure your template.
<template>
<div>
<div class="menu_srch d-flex" #click="dos">
<i class="fa fa-search search_btn"></i>
</div>
<div class="header_serch" v-if="showSearch">
<div class="header_serch_input">
<input type name placeholder="Search">
</div>
<div class="header_serch_i">
<i class="fa fa-search"></i>
</div>
</div>
</div>
</template>