What is causing the malfunction of Vue's method?

I'm attempting to create a Vue method, and I've encountered an issue where 'clickA' does not function, but 'clickB' does. Can someone explain why this is happening?

It's important that the solution allows the throttle function to work in the same way as 'clickB'.

new Vue({
  el: '#app',
  methods: {
    clickA: function() {
      _.throttle(function() {
        var date = new Date();
        var time = date.toLocaleTimeString();
        console.log('A clicked', time)
      }, 1000)
    },
    clickB: _.throttle(function() {
      var date = new Date();
      var time = date.toLocaleTimeString();
      console.log('B clicked', time)
    }, 1000)
  }
});
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ef8fbebcebca0bba0bfbe">[email protected]</a>/dist/vue.min.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2f43404b4e5c476f1b011e18011b">[email protected]</a>/lodash.min.js"></script>
<div id="app">
  <button type="button" @click="clickA">A</button>
  <button type="button" @click="clickB">B</button>
</div>

Answer №1

_.throttle yields a fresh function. While it may initially seem confusing, take some time to comprehend it, and it will start to make sense!

The function returned by _.throttle is linked to clickB.

On the contrary, with clickA, you're not associating the click event with the generated function from _.throttle.

Answer №2

When you use _.throttle, it creates a throttled version of the function you provide as an argument.

For example, you can create a new throttled function like this:

var slowFunction = _.throttle(fastFunction)

You can also define a function as a property within an object:

exampleObject: {
    slowFunction: _.throttle(fastFunction)
}

However, in the clickA section mentioned above, the throttled function is not properly assigned:

slowFunction: function() {
    // Calling _.throttle here creates a new function but doesn't execute it
    _.throttle(fastFunction)
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Selecting the parent span element using jQuery

Is there a better way to display text in the parent <div>'s <span>? I'm having trouble with using spans and .parent(), any advice would be appreciated. HTML: <div> <span></span> <!--the span where I need to show ...

Creating an image on an HTML canvas using RGB values

Looking for assistance on displaying an image using HTML Canvas with three 12x12 arrays containing R, G, and B values. I've seen Canvas demos showing how to draw lines, but nothing on using RGB arrays to create an image. Any tips or guidance would be ...

Is it possible to add filtering to my MongoDB when using the find() method in express routing? If so, how can

Hey there! I have this GET function that uses async to find a specific "Category" mongoose Schema that the user just clicked on, along with another "Tool" mongoose Schema which fetches all tools from my database and sends them both to a rendered page. I&a ...

What is the best way to bring in the original files of a JavaScript library?

Currently I am utilizing a library called selection.js. Within my application, I am importing from node_modules with the following code: import * as Selection from '@simonwep/selection-js' However, what I am interested in doing is modifying the ...

Having trouble capturing user_id in my dashboard component - Laravel and Vue.js combination

I am facing an issue with extracting user_id from my dashboard Vue component TableEditLinks.vue. When I try to change user_id in the submitForm() method from "1" to "document.querySelector("meta[name='user_id']").content('content')", it ...

What is the best method for ensuring a user remains logged in even after their access token expires, requiring them to log in again to resume their normal

Currently utilizing the Nuxt-axios module alongside a proxy. Implemented common error handling code in Plugins/axios.js export default function({ $axios, __isRetryRequest, store, app, redirect , payload , next}) { $axios.onRequest(config => { i ...

Error: HTML code being displayed instead of form value in Ajax request output

For the past couple of days, I've been struggling with an Ajax issue that I just can't seem to figure out. Despite looking for a solution online, nothing seems to work. Below is the code snippet that's causing me trouble: <!DOCTYPE html& ...

Utilize AJAX to dynamically load content within dynamic Bootstrap tabs for enhanced website functionality

I've been struggling to implement this functionality without success. My goal is to retrieve the name/id of the current bootstrap 4 tab using jQuery, pass it into a PHP variable, and then utilize it in a MySQL WHERE clause to determine which data shou ...

Can the dropbox option be automatically updated when input is entered in another text field?

I'm working on a form with a dropdown containing category names and a text field for entering the category code. What I need is for selecting a category name from the dropdown to automatically display the corresponding category code in the text field, ...

Error in Vue class-based component: Unable to access property 'message' due to its value being null

I am currently exploring the combination of typescript and Vue for the first time in my project. I am encountering an issue that seems to be related to scope, but I could be mistaken. I referenced a small example from VueJS and adapted it as shown below: ...

Uncomplicating Media Queries in Styled Components with the Power of React.js and Material-UI

My approach to handling media queries in Styled Components involves three distinct functions. One function handles min-width queries, another deals with max-width, and the third caters to both min-width and max-width scenarios. Let me walk you through eac ...

Phaser 3 shows images as vibrant green squares

In my project, I have two scenes: Loading and Menu. In the loading scene, I load images with the intention of displaying them in the menu. Here is the code for the Loading scene: import { CTS } from './../CTS.js'; import { MenuScene } from &apo ...

Next.js experiences slowdown when initializing props on the server side

I've been working on implementing SSR with Next.js. In my code, I'm fetching JSON data and using them as initial props. Everything works fine in development mode, but when I deploy to the server, fetching only works on the client-side (when navi ...

Tips for formatting a phone number using regular expressions in [Vue 2]

I am currently working on creating regex code that will meet the following requirements: Only allow the first character (0th index) in a string to be either a '+' symbol or a number (0-9). No non-numerical values (0-9) should be allowed anywhere ...

DZI Openseadragon in combination with three.js creates a stunning spherical image

I successfully transformed the flat image into a spherical image using the provided source code (three js). <!DOCTYPE html> <html lang="en"> <head> <title>Spherical image conversion</title> <style> body ...

What is the method for a single file component to transfer context.data?

When looping functional components in the transition-group, I encountered an issue because I forgot to pass a key reference to the root element of the tag component. I'm curious, how does a single file component pass the context.data? You can find a ...

Iterate through JSON and dynamically populate data

My goal is to dynamically populate content by iterating through JSON data using jQuery. First, an Ajax request is made Then the data is looped through to create HTML tags dynamically A div container with the class "product-wrapper" is created for each J ...

What steps can I take to stop the browser from refreshing a POST route in Express?

Currently, I am using node along with stripe integration for managing payments. My application includes a /charge route that collects various parameters from the front end and generates a receipt. I am faced with a challenge on how to redirect from a POST ...

What is the process for transferring child nodes to a parent node by removing the current node?

I am currently working on structuring some JSON data. Below is the JSON data I am working with: let all = [ { id: "n1", name: "Hipokrat", children: [ { id: "n2", ...

Is there a feature similar to Nuxt.js' auto-register in Next.js?

My Journey as a Beginner Being a beginner in the tech world, specifically in full-stack development (although I'm about 8 years behind), I find myself grappling with the decision of what to focus on learning. Vue and Nuxt.js are fantastic technologi ...