Trouble with VueJS refresh functionality

I am facing an issue with a method that needs to run on route load. Despite attempting to call it from the updated hook, it is not functioning as expected. Additionally, I have encountered an ESLint error.

methods: {
  getDeals (key, cb) {
    this.dealsRel.child(key).on('child_added', snap => {
      let dealRef = this.dealsRef.child(snap.key)
      dealRef.once('value', cb)
    })
  }
},
updated: {
  getDeals (this.finalItem, snap => {
    var snapVal = snap.val()
    this.deals.push(snapVal)
    console.log(this.deals)
  })
}

The following ESLint error persists:

Parsing error: Unexpected token

  31 |   },
  32 |   updated: {
  33 |     getDeals (this.finalItem, snap => {
     |               ^
  34 |       var snapVal = snap.val()
  35 |       this.deals.push(snapVal)

It seems like there might be an issue with my formatting. I need to find the correct way to make this work.

javascriptvue.jsvuejs2

Answer №1

Make sure to use a function for the updated hook instead of an object.

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

Hydrate a SSR VUE application to some extent

We are currently working on a website that unfortunately features numerous advertisements. Our plan is to utilize VUE for building the site, implement server side rendering, and then hydrate it on the client side. The issue lies in the fact that these adv ...

vue.jsvuejs2server-side-rendering

Tips for Showing a Portion of an Object in React JS

Need help displaying subitems of an object. I can display the main item but struggling with subitems. Here's the attached image for reference: I'm having trouble displaying the comments section in the object. I'm using Django API and trying ...

javascriptdjangoreactjsapi

Running AngularJS controllers should only occur once the initialization process has been fully completed

I am facing a situation where I need to load some essential global data before any controller is triggered in my AngularJS application. This essentially means resolving dependencies on a global level within AngularJS. As an example, let's consider a ...

javascriptangularjsinitialization

Using Angular routing without relying on a web server to load templates

Can templates be loaded in Angular without a web server? I came across an example here: https://groups.google.com/forum/#!topic/angular/LXzaAWqWEus but it seems to only print the template paths instead of their content. Is there a functioning example of t ...

javascriptangularjs

JavaScript: function that operates asynchronously

I am new to JavaScript and encountered some issues with async functions. I have a function that fetches data from MongoDB by creating a promise, but it returns a collection with an empty object. async function getRating(item, applicant) { let arr = await ...

javascriptnode.jsasynchronouspromiseasync-await

Transforming data from a singular object into an array containing multiple objects with key-value pairs

Looking for assistance with converting data from a single object in JSON format to another format. Here is the initial data: var originalData = { "1": "alpha", "2": "beta", "3": "ceta" } The desired format is as follows: var convertedData = ...

javascriptjson

Looking for a way to locate any elements in jQuery that do not contain a certain CSS class?

I am looking to target all form elements that do not contain a specific CSS class. For example: <form> <div> <input type="text" class="good"/> <input type="text" class="good"/> <input type="text" class="bad"/> ...

javascriptjquery

String casting for large JavaScript integers may require rounding to function properly

When trying to pass a large integer to a function from an onclick event in HTML, I always encounter issues with rounding. Despite using bigInt libraries, I still struggle to pass the full number accurately and would prefer a simple string casting method. ...

javascripthtmlbigint

Is there a way to verify the file extension in a multi-input form during an upload process?

I am looking for a solution that requests users to upload 4 different files when filling out the form. Check out this example of one of the inputs: <div class="custom-file"> <input type="file" class="custom-file-input" accept="video/*" id="v ...

javascripthtml

jQuery menu animation not triggering until second click

I am currently working on implementing a menu that will slide in after clicking the hamburger button (located in the upper right corner). Instead of simply appearing, I wanted to use a jQuery function for a smoother sliding effect. However, I seem to be e ...

javascriptjqueryanimationtoggle

Use jQuery to switch back and forth between two different sets of classes

I am attempting to switch between two different sets of classes using jQuery. My goal is to change from one custom icon to a font-awesome icon upon clicking an element. While I have been successful in changing a single class, I am facing challenges when tr ...

javascriptjqueryhtml

Guide on transferring information from .ejs file to .js file?

When sending data to a .ejs file using the res.render() method, how can we pass the same data to a .js file if that .ejs file includes a .js file in a script tag? // Server file snippet app.get('/student/data_structures/mock_test_1', (req, res) = ...

javascriptnode.jsexpressejs

Learn the steps to dynamically adjust the size of a pop-up window in Sencha based on the content that is

This is the designated container where I plan to display text. The code resides within a modal (pop-up) and it's important for the pop-up to adjust its height based on the loaded text. Ext.define('Base.view.Notes', { extend: 'Ext.Co ...

javascriptextjs

What is the best way to display a loading image and temporarily disable a button for 3 seconds before initiating the process of sending post data from another page via

Is there a way to display a loading image and disable a button for 3 seconds before sending post data from another page using AJAX POST? Once the OK button is clicked, I would like the loading image to appear and the <input type="button" value="Check" ...

javascriptphpjqueryajax

Assurance-driven number tally

I'm diving into JavaScript and recently started exploring promises. I've put together a code snippet that logs the value passed to the promise function as a parameter after the setTimeout function is triggered. Now, I'm wondering if there&ap ...

javascriptnode.jsasynchronouses6-promise

Are Primereact and MUI JOY Styling at Odds?

here is the image of datatables and button I am currently using Primereact and MUI Joy in the same project, but I am facing an issue where the Primereact styling does not load properly. I'm not sure if it's due to a conflict with MUI Joy or some ...

javascriptreactjsuser-interfacematerial-uiprimereact

I'm having difficulty mocking a function within the Jest NodeJS module

I have a module in NodeJS where I utilize a function called existsObject to validate the existence of a file in Google Storage. While testing my application with Jest 29.1.2, I am attempting to create a Mock to prevent the actual execution of this functio ...

javascriptnode.jsjestjsmocking

Develop a feature within a standard plugin that allows users to add, remove, or refresh content easily

I have developed a simple plugin that builds tables: ; (function ($, window, document, undefined) { // Define the plugin name and default options var pluginName = "tableBuilder", defaults = { }; // Plugin constructor func ...

javascriptjquery

Is it possible to dynamically add a Vuex plugin?

Is there a way to dynamically register a plugin with Vuex? While the documentation explains how to dynamically register modules, it doesn't provide details on how to do this for plugins. Is including the plugin at store creation the sole method for a ...

vue.jsvuejs2vuex

Checkbox malfunctioning when trying to add values after being checked

I have successfully completed a calculation system project using JavaScript. Everything works well, the calculations are accurate and taxes are included properly. However, I am facing an issue where the tax is not being included when I click on the checkbo ...

javascripthtmljqueryinnerhtml