CODEWITHSUNDEEP
laravelvue.jsvuejs2
Hkm Sadek
Hkm Sadek

Reputation: 3209

vuejs stop propagation of click when clicked outer div

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"

Upvotes: 1

Views: 195

Answers (1)

Pierre Said
Pierre Said

Reputation: 3820

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>

Upvotes: 3

Related Questions