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
@click - single click
@dblclick - double click
Edit: never mind, i misread the question
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