How to Implement Double Click Functionality in VueJS

Question

How to Implement Double Click Functionality in VueJS

I am facing an issue with my table where the columns have varying widths. To implement sticky headers, I need to calculate the column widths accurately.

Initially, I created a function that increases the column width when double-clicking on the header. Surprisingly, it only works for the first double click. Subsequent clicks (4 or 6 times) do not trigger any action after the initial one. Is there a way to reset the event so that the function is triggered again after two more clicks?

While moving the mouse, I noticed that multiple consecutive double clicks can be performed. However, this behavior is not the desired outcome.

Find below the snippet of code:

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

javascript vue.js

Answer 1

Answer №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>

Referenced from: How to manage click and double-click events on the same element in Vue.js, with input from @JBDouble05

new Vue({
    el: '#app',
    data: {
        counter: 0,  // keeps track of clicks
        timer: null  // Must be defined here for access in both clicks
    },    
    methods: {
        changeColumnDefinition: function(event){
            var self = this
            this.counter++ 
            if(this.counter == 1) {
                this.timer = setTimeout(function() {
                    // DO NOTHING EXCEPT RESET IF THERE'S ONLY ONE CLICK                    
                    self.counter = 0
                }, 500);  // adjust delay as needed
            }else{
                clearTimeout(this.timer);  
                // COLUMN_DEFINITION[c]+=50
                self.counter = 0;
            }         
        }      
    }
});

NOTE This extends beyond the original question, but:

I would recommend encapsulating this within a component, especially if you have multiple headers. If an external function needs to be called, simply use:

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

To emit an event and then handle it in your component like this:

<my-awesome-component @someEvent="someFunction"></my-awesome-component>

Answer 2

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

Referenced from: How to manage click and double-click events on the same element in Vue.js, with input from @JBDouble05

new Vue({
    el: '#app',
    data: {
        counter: 0,  // keeps track of clicks
        timer: null  // Must be defined here for access in both clicks
    },    
    methods: {
        changeColumnDefinition: function(event){
            var self = this
            this.counter++ 
            if(this.counter == 1) {
                this.timer = setTimeout(function() {
                    // DO NOTHING EXCEPT RESET IF THERE'S ONLY ONE CLICK                    
                    self.counter = 0
                }, 500);  // adjust delay as needed
            }else{
                clearTimeout(this.timer);  
                // COLUMN_DEFINITION[c]+=50
                self.counter = 0;
            }         
        }      
    }
});

NOTE This extends beyond the original question, but:

I would recommend encapsulating this within a component, especially if you have multiple headers. If an external function needs to be called, simply use:

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

To emit an event and then handle it in your component like this:

<my-awesome-component @someEvent="someFunction"></my-awesome-component>

Answer 3

Answer №2

To track double clicks, create a variable that increments whenever the v-on:dblclick event is triggered. Then, in your JavaScript file, add an event listener to check if the variable modulus 2 equals 0 - indicating two double clicks. If not, it means an odd number of clicks occurred and you can reset the event. It may sound complicated, but feel free to ask for clarification or simplification.

Answer 4

To track double clicks, create a variable that increments whenever the v-on:dblclick event is triggered. Then, in your JavaScript file, add an event listener to check if the variable modulus 2 equals 0 - indicating two double clicks. If not, it means an odd number of clicks occurred and you can reset the event. It may sound complicated, but feel free to ask for clarification or simplification.

How to Implement Double Click Functionality in VueJS

Answer №1

Answer №2

Similar questions

using an external JavaScript function in the MongoDB shell

Encountering a React Runtime issue: The element type is invalid, expecting a string for built-in components or a class/function for composite components

Tips for navigating to a new route after a successful AJAX request

What happens to the npm package if I transfer ownership of a github repository to a different user?

Updating a database seamlessly via a dropdown menu without having to refresh the entire webpage

Filtering a list in AngularJS based on a property of an object with a filter applied on it

Setting the base URL in Next.js according to an environment variable: a step-by-step guide

Ways to modify a global variable across all components

The final value is always returned by jQuery's each method

Where is the location of the directory on the hard drive that was created using the getDirectory() method in HTML5?

Assign a predetermined value to a dropdown list within a FormGroup

When an onClick event is triggered in jQuery, generate a certain number of div blocks based on the available list items, such as image source and heading text

Retrieving the input[text] value in TypeScript before trimming any special characters

Explore the inner workings and file contents of a package using the NPM registry API, by accessing a detailed JSON response

forEach`` binding in knockout object

Exporting Canvas data without the alpha channel

Tips for successfully parsing JSON data during an Ajax call

Executing JavaScript code within an AJAX request

The behavior of Ajax is resembling that of a GET method, even though its intended method

Encountering a 'unknown column' error while using MySQL on a Windows operating system