Access the data emitted by an event in Vue.js

Can someone help me with extracting the content of a $event.emit? I am facing an issue where the console.log inside the function displays the content, but once outside the function, it does not show the variable.

mounted () {
  this.$events.on('emitEvent', function (eventData) {
    this.line = _.cloneDeep(eventData)
    console.log('1', this.line)
  })
  console.log('2', this.line)
}

I have been utilizing this particular package for event management.

Answer №1

Here is a suggested approach:

mounted() {
   var $self = this;

   this.$events.on('emitEvent', function (eventData) {
        $self.line = _.cloneDeep(eventData);
        console.log('1', $self.line);
   })

   console.log('2', this.line);
}

Answer №2

Here is a possible solution:

This code snippet should do the trick:

this.$events.on('emitEvent', (eventData) => {
    this.line = _.cloneDeep(eventData)
    console.log('1', this.line)
  })
  console.log('2', this.line)
 }

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

Access values in object array without iterating over it

I'm wondering if there is a way to extract the values of the name property from an object array without having to iterate through it. var objArray = [ { name: 'APPLE', type: 'FRUIT' }, { name: 'ONION', t ...

How can you create a table cell that is only partially editable while still allowing inline JavaScript functions to work?

Just a few days back, I posted a question similar to this one and received an incredibly helpful response. However, my attempt at creating a table calculator has hit a snag. Each table row in a particular column already has an assigned `id` to transform t ...

"Enhance your website forms with a Bootstrap typeahead feature for tagging using

I've encountered a roadblock while trying to transfer my functioning solution to my meteor app. The typeahead and tags input plugin work perfectly on my local PC, but when I migrate them to meteor.js, something breaks. I've made sure to include ...

Leveraging async elements alongside loading and error components in Vue Router

I am attempting to achieve the following: import Vue from "vue"; import Router from "vue-router"; import Home from "./views/Home.vue"; import LoadingComponent from '@/components/Loading.vue'; Vue.use(Router); const router = new Router({ ro ...

What is the most efficient way to retrieve a value (specifically an access token) within a function without using

const callback = (req, res) => { // Your application requests refresh and access tokens after verifying the state parameter if (state === null || state !== storedState) { ... } else { res.clearCookie(stateKey); var authOptions = {...} ...

"Exploring the world of Angular, promises, and effective caching strategies in

In my Angular application, there is a service responsible for loading items from the server. When an item is selected in a view, the corresponding item should be retrieved from the list and displayed in detail. The issue arises when I reload the page – ...

When implementing auto-generated IDs in HTML forms, rely on randomly generated values for increased uniqueness

When developing a form with multiple complex controls built as Backbone views, one wants to ensure that the labels are correctly linked to the input elements. This is typically done using the "for" attribute. However, in cases where the same control needs ...

An error message is displayed when attempting to retrieve a json response

After implementing my flask app, I noticed that the following code snippet is being returned: return json.dumps({'status': 'OK','url': 'www.blahg.com'}) Upon inspecting my javascript code, I found it to be structur ...

Utilizing React JS to neatly display Firebase data in a table

Before I post, I always make sure to do my due diligence by searching on Google, YouTube, forums, or trying to figure it out on my own. I even check questions similar to mine asked by other people, but unfortunately, I'm stuck. Currently, I am using ...

disable any other active toggle in a vue component

Exploring JavaScript and how to accomplish the following tasks Snapshot The issue I am facing is that if I click on a product, and then click on settings, both are open. However, I want only the currently clicked toggle to be open. For instance, if I cl ...

What is the process for managing multiple selections using checkbox code?

I have been following the official tutorial for ag-grid and I've reached a point where I need to manipulate information related to selected checkboxes. However, the documentation lacks detail on how the code actually functions. It might be understanda ...

In what way can the result of the code displayed be considered as truthful?

this.someService.findDevices() .subscribe((segments) => { this.segments = Array.from(segments.segments); this.packs.forEach((pack) => { pack.segments = Array.from(segments.segments); pack. ...

Angular updates location, but browser redirects to incorrect page

I want my application to redirect non-logged in users to a login page. Following advice from a popular source, the app listens for routeChangeStart events like this: $rootScope.$on("$routeChangeStart", function(event, next, current) { if ($rootScope.c ...

Coming back from the setState callback

In my code, I have a scenario where the Parent component is calling a function from the Child component using refs. Within the Child component function, there is a this.setState method with a callback function embedded in it. handleSaveProject = async () ...

Resolving the Problem of Unidentified Usernames in Django Channels WebSocket Consumer

I have developed a django consumers.py file and a frontend using HTML and CSS to showcase messages sent by users, along with the profile picture and username of the sender. However, whenever I access the browser, the message displays correctly but the user ...

Pressing a button meant to transfer text from a textarea results in the typed content failing to show up

Having trouble with a custom text area called a math field. I'm currently interning on a project to build a math search engine, where users can input plain text and LaTeX equations into a query bar. The issue I'm facing is that sometimes when th ...

I am experiencing issues with buttons not appearing on screen while attempting to establish a connection with Dropbox through the use

I am currently working on a lab project and looking to utilize Javascript to connect to Dropbox. Despite checking for syntax errors, the code I have written does not display the buttons as expected. You can view the current code setup in this JSFiddle: ht ...

The script functions perfectly in jsfiddle, yet encounters issues when used in an HTML

I stumbled upon a seemingly peculiar issue with my script in jsfiddle: https://jsfiddle.net/oxw4e5yh/ Interestingly, the same script does not seem to work when embedded in an HTML document: <!DOCTYPE html> <html lang="en"> <head> & ...

store user settings in local storage

After writing some code with a link that toggles text visibility upon click, I now want to incorporate saving this state in web storage so that it persists upon page reload. As a beginner in JavaScript and HTML, this task has proven challenging for me. Th ...

What is the reason for the JavaScript TypeError (undefined) being triggered when this object is used within a function?

I have defined a new object like this: function node(){ this.tag = null; this.Tdata = []; this.Tchilds = []; } Now, I am trying to use this object in a function: function Validate(root /*Ass ...