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

Is the behavior of a function with synchronous AJAX (XMLHttpRequest) call in JavaScript (Vanilla, without jQuery) the same as asynchronous?

Alternative to Webpack for modifying global variables in preloaded modules

Modal Pop-ups Failing to Open on Subsequent Attempts

Tips for navigating the world of hybrid web applications that combine elements of both traditional multi-page applications and single-page

What is the best way to retrieve information from a different table in order to establish a condition and form a relationship in Laravel and Vue?

Unable to access external library using browserify and debowerify

Enter information into the designated text field once you have selected the button

Recording setInterval data in the console will display each number leading up to the current count

What is the best way to extract data from the ajax.done() function?

Directive for integrating Amcharts with Angular JS

Is it considered safe to display the error message from an AJAX call for security reasons?

I am trying to figure out how to properly utilize server-only functions within Next.js middleware

What is the best way to keep track of a checkbox's value after unchecking it and then returning to the same slide?

Applying a dynamic translate3d transformation on the ::after element using CSS3

Is there a way to assign a null value to an empty material UI text field when submitting the form, rather than an empty string?

Is there a method in TypeScript to make an enum more dynamic by parameterizing it?

How to attach a Vue.js component to the root of an application

Guide on using jQuery to dynamically update a section of an ejs template following an AJAX request in ExpressJS

Is there a bug in Safari 8.0 related to jQuery and backslashes?

Is there a proper method in AngularJS for factories to return objects?