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

Adding values to a knockout data table without refreshing the page

I am currently experiencing difficulties with refreshing my knockout.js DataTable. I have a data table that loads correctly on page load using the attached function method. I also have multiple buttons (Display All, Allowed, Not Allowed) that display the t ...

javascriptjqueryajaxknockout.jsdatatables

When running npm run build, an error with the error code ELIFECYCLE is

For some time now, I have been following the "ES6 for everyone" series by Wes Bos, but I hit a roadblock while trying to tackle a webpack episode. Every time I attempt to execute the "npm run build" command in my CMD prompt, I encounter this error: npm ...

javascriptnode.jsnpmwebpack

updating the model when the view input element is changed, without the model affecting the view input element

Does anyone know of a way to achieve one-way binding that updates the model when the value of a number input is changed, but prevents the input element from being updated when the model changes? I prefer not to use v-model or :value, as they are two-way ...

vue.js

Why will the experimental activation of React concurrent features in Nextjs 12 disable API routes?

I just upgraded to Next.js version 12 and set up some API routes (e.g. "/api/products"). These routes were functioning properly, but when I enabled concurrentFeatures: true in my next.config.ts, the API routes stopped working. The console display ...

javascriptreactjstypescriptnext.js

What is the manual way to activate Ratchet's push feature?

I am facing an issue with a link that triggers a search function. Currently, the link is working as expected. However, I am having trouble getting the search to be executed by pressing the 'enter' button. Here is my code snippet: $('#sea ...

javascripthtmlmobileratchet-2

Unable to provide feedback on the input elements

ISSUE: Unable to provide input in the input fields // Enable dragging for the DIV element: dragElement(document.getElementById("mydiv")); function dragElement(elmnt) { var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; if (document.getElementB ...

javascripthtmlcsstwitter-bootstrapbootstrap-5

Manage how child components are displayed in React in a dynamic manner

My React parent component contains child components that are rendered within it. <div id="parent"> {<div style={{ visibility: isComp1 ? "visible" : "hidden" }}><MyComponent1 {...props}/></div>} ...

javascriptreactjsreact-hooks

Vue 3 feature: Click the button to dynamically insert a new row into the grid

Just starting out in the world of coding, I've zero experience with Vue - it's my introduction to frameworks and arrays are currently my nemesis. In a recent exercise, I managed to display the first five elements of an array in a table after filt ...

javascriptarraysvue.jsvuejs3

AngularJS Skype URI Button Problem

Implementing a Skype button in my project using AngularJS has been challenging. Here is the code I am currently working with: HTML: <script type="text/javascript" src="http://www.skypeassets.com/i/scom/js/skype-uri.js"></script> <skype-ui ...

javascriptangularjsskypeskype-uri.js

Removing an element from an array by evaluating each item within the array

Input array: ["temp/1/Lounge/empty", "temp/1/Lounge/66,66,66,66,66,66,66,66,64,64,64,64…,64,64,64,64,64,64,64", "temp/2/Lounge/empty", "temp/3/Lounge/empty"] I have a list of elements like the above. Each element consists of four parts separated by s ...

javascriptarrays

Transform the input value into a string

Struggling with converting an input value into a string. HTML: <input type="text" placeholder="Email Ex: john123" id="emailinput"> <input type="text" placeholder="Domain Ex: @gmail.com" id="domaininput"> JS: let emailVal = document.getElem ...

javascripthtml

Encountering a npm script error while running on a Windows operating

While using webpack to build my application, I encountered the following error message in the command prompt: [email protected] dev D:\Myprograms\java script\forkify webpack --mode development The error mentioned: Insufficient num ...

javascriptnpmwebpack

The JSON GET method displays HTML content when accessed through code or console, but presents a JSON object when accessed through a web address

I am currently trying to execute the following code: $(document).ready(function () { $.ajax({ url: 'http://foodfetch.us/OrderApi/locations', type: 'GET', success: function(data){ alert(data); ...

javascriptjqueryjsonajax

modify the URL records within the GetJson function

My current address is "http://localhost:8000/index", and when I execute the following jQuery code: $.getJSON("1",function(data) { .....code }); It redirects to "http://localhost:8000/index/1". This works fine for now. ...

javascriptjqueryjson

Concealing applicationId and clientToken in Datadog

I'm currently using an Angular application and I've integrated it with the Datadog application to utilize Session and Replay (RUM). However, I am concerned about the security of my sensitive information such as applicationId and clientToken. Is t ...

javascriptangulartypescriptdatadog

Manipulating strings within strings with JavaScript

It's been a strange discovery I made while working with JavaScript. Whenever I try to assign a two-word string to a CSS property, like setting the fontFamily property of an HTML element to "Arial Black", it ends up looking something like thi ...

javascriptcssstring

The error occurred while trying to cast the value of "{{Campground.name}}" to an ObjectID. This value, which is of type string, could not be converted to an ObjectID at the path "_id" for

const express = require("express"); const session = require("express-session"); const cookieParser = require('cookie-parser') const mongoose = require("mongoose"); const { Campground, User, Review } = require(" ...

javascriptnode.jsmongodbexpressmongoose

I am encountering a problem with the app.patch() function not working properly. Although the get and delete functions are functioning as expected, the patch function seems to be

I am in the process of setting up a server that can handle CRUD operations. The Movie model currently only consists of one property, which is the title. Although I can create new movies, delete existing ones, and even search for a ...

javascriptnode.jsapiexpresspatch

What steps do I need to take to have Greasemonkey execute a function upon the completion of an AJAX call

Whenever I select the trending tab on YouTube, an AJAX call is triggered to retrieve the latest trending videos. I have developed a custom script that filters out any videos I have already watched. Although this script successfully applies to the homepag ...

javascriptajaxevent-handlingyoutubegreasemonkey

CSS hover effect ceases to function after the button has been clicked once

I am facing a dilemma with styling that I can't seem to resolve. There is a basic toggle feature on my page with two options -- the user can select either Toggle1 or Toggle2, resulting in different data being displayed dynamically based on the active ...

javascripthtmljquerycss