[Vuejs]-Vue why click event not working in v-if or v-show

by

0👍

I am not sure if I get it correctly but as per the code you posted. Your parent div will be removed from the DOM as v-if is false. You can assign isActive as true while mounting.

Working Demo :

new Vue({
  el: '#app',
  data() {
    return {
        isActive: false,
    }
  },
  methods: {
    select(event) {
      console.log('ID :' + event.currentTarget.id);
    }
  },
  mounted() {
    this.isActive = true;
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div
      v-if="isActive"
      class="absolute shadow bg-white top-100 z-40 w-full lef-0 rounded max-h-select overflow-y-auto">
      <div class="flex flex-col w-full">

          <div
              id="foo"
              @click="select($event)"
              class="cursor-pointer w-full border-gray-100 rounded-t border-b hover:bg-teal-100 hover:bg-gray-100 hover:border-indigo-500">
              <div class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative hover:border-teal-100">
                  <div class="w-full items-center flex">
                      <div class="mx-2 -mt-1">
                          Jack jhon
                      </div>
                  </div>
              </div>
          </div>

          <div
              id="foo2"
              v-on:click="select($event)"
              class="cursor-pointer w-full border-gray-100 rounded-t border-b hover:bg-teal-100 hover:bg-gray-100 hover:border-indigo-500">
              <div class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative hover:border-teal-100">
                  <div class="w-full items-center flex">
                      <div class="mx-2 -mt-1">
                          Jack jhon 2
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</div>

0👍

this is whole template code

<template>
    <div>
        <div class="flex flex-col items-center">
            <div class="w-full flex flex-col items-center">
                <div class="w-full">
                    <div class="flex flex-col items-center relative">
                        <div class="w-full">
                            <div class="flex">
                                <div class="flex flex-auto flex-wrap"></div>
                                <input
                                    class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:rounded-none focus:rounded-t-lg focus:border-b-0 focus:bg-white focus:border-indigo-500 border-transparent focus:border-transparent focus:ring-0"
                                    type="text"
                                    v-model="selected"
                                    :name="name"
                                    @focusin="isActive = !isActive"
                                    @focusout="isActive = !isActive"
                                    placeholder="Search by position">
                            </div>
                        </div>
                        <div
                            v-if="isActive"
                            class="absolute shadow bg-white top-100 z-40 w-full lef-0 rounded max-h-select overflow-y-auto">
                            <div class="flex flex-col w-full">

                             <div
                                id="foo"
                                @click="select($event)"
                                class="cursor-pointer w-full border-gray-100 rounded-t border-b hover:bg-teal-100 hover:bg-gray-100 hover:border-indigo-500">
                                <div class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative hover:border-teal-100">
                                    <div class="w-full items-center flex">
                                        <div class="mx-2 -mt-1">
                                            Jack jhon
                                        </div>
                                    </div>
                                </div>
                            </div>
                    
                            <div
                                id="foo2"
                                v-on:click="select($event)"
                                class="cursor-pointer w-full border-gray-100 rounded-t border-b hover:bg-teal-100 hover:bg-gray-100 hover:border-indigo-500">
                                <div class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative hover:border-teal-100">
                                    <div class="w-full items-center flex">
                                        <div class="mx-2 -mt-1">
                                            Jack jhon 2
                                        </div>
                                    </div>
                                </div>
                            </div>




                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

Leave a comment