What issues are arising with Vue in conjunction with lodash's debounce function?

Here's the issue:

props: {
  delay: Number,
}

Watching for changes:

 watch: {
   q: _.debounce(function() {
     console.log(this.delay);      // 500; always works fine, this.delay is here
   }, this.delay)                  // never works; 
 },

If I manually input a delay of 500 instead of using this.delay, it works perfectly. Otherwise, the function does not debounce as expected.

Can someone help me identify what I'm doing incorrectly? Appreciate any insights you can provide. Thank you.

Answer №1

Attempting to set the delay in that particular location will not yield successful results because this does not refer to the component within that scope. To achieve the desired outcome, consider utilizing $watch inside a lifecycle hook instead:

created () {
  this.debounceUnwatch = this.$watch('q', _.debounce(
    this.someMethod,
    this.delay
  ))
},

destroyed () {
  // Remove the watcher.
  this.debounceUnwatch()
},

For more details, refer to: https://v2.vuejs.org/v2/api/#vm-watch

Edit

The suggested approach did not produce the intended outcome, despite initial expectations. It appears that the key is to debounce the process responsible for updating q, rather than directly debouncing q itself.

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

"Error: Unable to access the '$router' property of null" encountered in Vuetify

After attempting to navigate to a different page by clicking a button in vuetify, I encountered an issue. The console displayed the following error message: "TypeError: Cannot read property '$router' of null" Below is the code snippet: Product ...

Why won't my code display in the div element as expected?

I am in the process of developing a gameserver query feature for my website. The objective is to load the content, save it, and then display it later. However, I am encountering an issue with the echoing functionality. The element is selected by its ID and ...

Troubleshooting Asynchronous Code in JavaScript

I was experimenting with creating a brute force poll voting script. $('#vote').click(function(e) { var votes = 0; var attempts = 0; var failures = 0; for(var i = 0; i < 500; i++){ ...

Upon completing the upload, dropzone.js displays checkmark and x icons for confirmation

It seems like there may be a CSS problem. When I programmatically create a dropzone box, I notice that the checkmark and x icons, along with other text, appear after the upload (see image link). <div id="header-dropzone"></div> $("#header-drop ...

Error: The JSON in app.js is invalid due to the unexpected token "C" at position 0

When I try to run this code snippet, I sometimes encounter an error message that says: SyntaxError: Unexpected token C in JSON at position 0. function fetchData(user_country) { fetch(`https://covid19-monitor-pro.p.rapidapi.com/coronavirus/cases_by_day ...

Icons in Semantic-UI: Facing Difficulty in Accessing ("CORS Request Not HTTP"

Here's an example I'm working on: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Understanding - Main</title> <link rel="stylesheet" type="text/css" href="../semantic/dist/semanti ...

Matching a string literal with a hyphen in Express Router using Regex - How do I do it?

My dilemma involves two routes. When attempting to access the route test, it also matches with example-test due to the presence of a hyphen. Even after trying to escape it using \-, the issue persists. Is there a way to accurately match the exact rout ...

Why is inner HTML returning input/textbox instead of the value?

I need help extracting the value from an input/textbox within a table cell. Although the rest of my code is functioning correctly, I'm struggling to retrieve the value from this particular input element. I've attempted to access the value using ...

What is the process for retrieving the data that is transferred to Jade during compilation?

In my Gruntfile.js, I have included the code where I am passing a JSON file to Jade. Here is a snippet of the code: compile: { files: { // some files }, options: { pretty: true, ...

By default, the select option in AngularJS will have a value of either an object or null

This block of code is located in the js file: $scope.ListOption = []; $scope.ListOption.push({ Value: "0", Name: Car }); $scope.ListOption.push({ Value: "1", Name: House }); Below is the corresponding HTML code: <select class="form-control" id="Categ ...

What is causing my React-Testing Library queries to not work at all?

In my current project, I am using Jest along with Testing-Library to create UI unit tests. One issue that I encountered was that the components were not rendering on the DOM. After some investigation, I found that the main culprit was a component called & ...

An issue arose while retrieving the AJAX response in Javascript

I'm facing an issue with my project where I am using ajax to send messages. The problem is that I cannot get the response in the ajax function, even though it was working perfectly fine before. I can't pinpoint the exact cause of the issue, so pl ...

Is there a way for me to adjust the font size across the entire page?

Most CSS classes come with a fixed font-size value already set. For instance: font-size: 16px font-size: 14px etc. Is there a way to increase the font size of the entire page by 110%? For example, font-size: 16px -> 17.6 font-size: 14px -> 15.4 ...

Difficulty in locating elements within ngView-loaded elements using jQuery [AngularJS]

I am attempting to retrieve the offset().top of an element <div class='profile'></div> located within a ngView controlled by app.js. However, I encounter an error in the console: Uncaught TypeError: Cannot read property 'top&a ...

The Mongoose framework has initiated a request to access the nested schema

I am puzzled as to why my database is not updating with my requests. I have a schema with nested objects, and I am trying to send a request to update a specific object within another object. The response indicates success, but nothing actually gets added t ...

Phantom is refusing to initialize/execute angularjs controller methods

I am seeking assistance in generating a PDF file from an HTML page that is controlled by an AngularJS controller. The PDF creation process involves using the Phantom module. My issue is that while data binding works correctly when I navigate to the specifi ...

Can anyone provide guidance on activating bootstrap tabs-left in bootstrap 3.3.x?

I've noticed that the style nav-tabs left isn't functioning in Bootstrap versions 3.3.0 and 3.3.2. I'm curious if anyone has found a way to re-enable this style so that tabs can run vertically with content displayed on the right. For those ...

Only one tab can be open at a time, and when clicking on another tab, the focus will shift to that tab

My main concern is opening one tab at a time. The issue lies in the fact that when a tab is open and another tab is clicked, the height of the first tab reduces and the section tab title moves to the top of the screen making it invisible to the user. I wan ...

Conceal a designated H2 identifier through the use of either javascript or CSS

We are currently exploring Zendesk for our customer support website, but we have encountered some limitations in terms of customization. Our goal is to remove specific text from the page by utilizing Zendesk's widgets function, which can be implemente ...

Shortcut to prevent false 0 values

When my server responds, it sends back an object structured as follows: { success: integer } Meanwhile, on the client side I'm using: return body && body.success; The issue arises when the integer is zero, causing the above code to return ...