I tried searching online though I did find an answer which is this one -> https://antenna.io/blog/2018/03/handle-single-and-double-clicks-on-the-same-element-in-vue-js/

but couldn't understand it so I can up with a solution inspired by above solution

 detectClick() {
  this.clickCount  = 1;
  if (this.clickCount === 1) {
    var singleClick = setTimeout(() => {
      console.log("we are in singleClick");
      this.currentPickerDate();
      this.clickCount = 0;
    }, 500);
  }
  if (this.clickCount === 2) {
    console.log("we are in double Click");
    clearTimeout(singleClick);
    this.showEvent();
    this.clickCount = 0;
  }
}

and the component is

<v-date-picker
    v-model="date"
    @click:date="detectClick"
    :events="allEvents"
    :picker-date.sync="pickerDate"
    event-color="red lighten-2">
</v-date-picker>

I don't think currentPickerFunction is required but if you do need it let me know In detectClick function the problem is that my setTimeout function is not working i don't know why If you know a better answer let me know Thanks

I am using vue 2 and vuetify

CodePudding user response：

Because var singleClick is defined in the first if clause it has block scope. Therefore, singleClick can not be accessed in the second if clause. You must define singleClick in global scope. You can see that clickTimer: null has been defined in data() if you look at the link that you have shared:

data () {
   return {
      clickCount: 0,
      clickTimer: null
   };
},

Check out the link about javascript scope

CodePudding user response：

@click - single click

@dblclick - double click

Edit: never mind, i misread the question