vue.js: how to handle click and dblclick events on same element

Question

I have a vue component with separate events for click/dblclik. Single click (de)selects row, dblclick opens edit form.

Answer 1

As suggested in comments, You can simulate the dblclick event by setting up a timer for a certain period of time(say x). If we do not get another click during that time span, go for the single_click_function(). If we do get one, call double_click_function(). Timer will be cleared once the second click is received. It will also be cleared once x milliseconds are lapsed.

See below code and working fiddle.

new Vue({
    el: '#app',
    data: {
        result: [],
        delay: 700,
        clicks: 0,
        timer: null
    },    
     mounted: function() {
        console.log('mounted');
     },      
     methods: {
        oneClick: function(event){
          this.clicks++ 
          if(this.clicks === 1) {
            var self = this
            this.timer = setTimeout(function() {
              self.result.push(event.type);
              self.clicks = 0
            }, this.delay);
          } else{
             clearTimeout(this.timer);  
             this.result.push('dblclick');
             this.clicks = 0;
          }         
        }      
     }
});