2

I have a table with columns of different widths. I use sticky headers for which I have to calculate the column widths.

Now I wrote a function to increase the column width by double clicking the header. This works for the first double click. But if I click on it 4 or 6 times nothing happens after the first double click. How can I reset the event so that after 2 more clicks the event is triggered again?

When I move the mouse I can do several double clicks one after the other. But that is not the goal.

Here is the code snippet:

<th 
  v-for="c in data.columns" 
  v-if="visiblecolumns.includes(c)" 
  v-on:dblclick="COLUMN_DEFINITION[c]+=50" 
  :style="{ 'min-width': COLUMN_DEFINITION[c] + 'px', 'max-width': COLUMN_DEFINITION[c] + 'px' }">
    {{ c }}
</th>
Philipp Nies
  • 945
  • 4
  • 20
  • 38

2 Answers2

1
<th 
  v-for="c in data.columns" 
  v-if="visiblecolumns.includes(c)" 
  @click="changeColumnDefinition" 
  :style="{ 'min-width': COLUMN_DEFINITION[c] + 'px', 'max-width': COLUMN_DEFINITION[c] + 'px' }">
    {{ c }}
</th>

From: vue.js: how to handle click and dblclick events on same element, and as suggested by @JBDouble05

new Vue({
    el: '#app',
    data: {
        counter: 0,  // count the clicks
        timer: null  // Needs to be specified here so it can be accessed on both clicks
    },    
    methods: {
        changeColumnDefinition: function(event){
            var self = this
            this.counter++ 
            if(this.counter == 1) {
                this.timer = setTimeout(function() {
                    // DO NOTHING BUT RESET IN CASE THERES JUST ONE CLICK                    
                    self.counter = 0
                }, 500);  // increase delay as you like
            }else{
                clearTimeout(this.timer);  
                // COLUMN_DEFINITION[c]+=50
                self.counter = 0;
            }         
        }      
    }
});

NOTE This goes beyond the question, but:

I would personally wrap this up in a component, since you probably will have more than one header. If you need to call an outside function just use:

this.$emit('someEvent', someValue);

To emit an event and then access it in your component as

<my-awesome-component @someEvent="someFunction"></my-awesome-component>
Erubiel
  • 2,934
  • 14
  • 32
  • Thanks for the help. With a timeout function I had already solved it. I was more interested in resetting the double-click event. But it seems like it's not possible. – Philipp Nies Aug 30 '18 at 10:55
  • yeah, i tried a little that approach, but i could not reset it either, i had to move the mouse a little, not to get completely out of the element, but at least move it a few pixels away – Erubiel Aug 30 '18 at 10:57
  • Same case with me. Also in different browsers. Thought there might be a way around moving the mouse. – Philipp Nies Aug 30 '18 at 11:00
  • maybe flashing the element ? hahaha – Erubiel Aug 30 '18 at 11:00
  • What does flashing an element mean? – Philipp Nies Aug 30 '18 at 11:01
  • exactly what it sounds like... somehow hide it with v-if and then show it again... to refresh the dom... maybe that refreshes the double click, though i did more testing and you don't have to move a bit, you just cannot do a constant double click... but if you wait something like a second, it double clicks... – Erubiel Aug 30 '18 at 11:07
  • I'm gonna play around there a little bit. If I found a good opportunity, I'll write it in here – Philipp Nies Aug 30 '18 at 11:09
  • i tried this and didn't worked :( as i expected... it may be the browser blocking that specific coordinate to generate the double click, cause this happens on jquery too – Erubiel Aug 30 '18 at 11:16
0

What you should do is make a modulo variable, and attach an incrementational statement to your v-on:dblclick attribute, that adds one to (increments) the value of a variable, and then, add an event listener in your JavaScript file, and when this happens, perform a modulus operation upon that variable: if it's divisible by two (counter % 2 == 0), then the user has double-clicked twice. If it's not divisible by two (counter % 2 != 0) then they've clicked on it an odd number of times, and you can re-engage the event that occurred when they first double-clicked on it. That was a mouthful, but hopefully you got it, and just ask if you need simplification or further explanation.

Jack Bashford
  • 43,180
  • 11
  • 50
  • 79