Vue 为什么单击事件在 v-if 或 v-show 中不起作用

Question

i am trying to fire click event from div but if v-if false on component rendering click event not working here my code:

 export default { name: "ProSelect", data() { return { isActive: false, }}, methods: { select(event) { console.log('ID:' + event.currentTarget.id); } } }

 <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>

if i change isActive variable to true on rendering click is working

i found the answer but i wonder why this is not working.If i use @mousedown.prevent instead of @click its working

Answer 1

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>

Answer 2

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>