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

        <div
            id="foo"
            @click="select($event)"
            >
            <div >
                <div >
                    <div >
                        Jack jhon
                    </div>
                </div>
            </div>
        </div>

        <div
            id="foo2"
            v-on:click="select($event)"
            >
            <div >
                <div >
                    <div >
                        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

CodePudding user response：

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

          <div
              id="foo"
              @click="select($event)"
              >
              <div >
                  <div >
                      <div >
                          Jack jhon
                      </div>
                  </div>
              </div>
          </div>

          <div
              id="foo2"
              v-on:click="select($event)"
              >
              <div >
                  <div >
                      <div >
                          Jack jhon 2
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</div>

CodePudding user response：

this is whole template code

<template>
    <div>
        <div >
            <div >
                <div >
                    <div >
                        <div >
                            <div >
                                <div ></div>
                                <input
                                    
                                    type="text"
                                    v-model="selected"
                                    :name="name"
                                    @focusin="isActive = !isActive"
                                    @focusout="isActive = !isActive"
                                    placeholder="Search by position">
                            </div>
                        </div>
                        <div
                            v-if="isActive"
                            >
                            <div >

                             <div
                                id="foo"
                                @click="select($event)"
                                >
                                <div >
                                    <div >
                                        <div >
                                            Jack jhon
                                        </div>
                                    </div>
                                </div>
                            </div>
                    
                            <div
                                id="foo2"
                                v-on:click="select($event)"
                                >
                                <div >
                                    <div >
                                        <div >
                                            Jack jhon 2
                                        </div>
                                    </div>
                                </div>
                            </div>




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