After refreshing the page, the eventBus in Vue.js fails to emit the property

Is there a way to pass a property from one component to another, even if they are siblings, after the page has been refreshed? I want this to happen automatically on page load. To achieve this, I am using an eventBus:

EventBus.$emit('generatedSum', this.sum);

In the sibling component, I receive the emitted data with:

EventBus.$on('generatedSum', (sum) => {
      this.correct = sum;
    });

Both operations are placed within the created hook in the lifecycle:

created(){}

The issue I am facing is that when the code is recompiled after saving changes, the property is successfully passed to the sibling component. However, upon manual refreshing of the page, the property does not appear in the sibling component as expected.

javascriptvue.js

Answer №1

It seems that when the page refreshes, Vue components are mounted one by one. In this case, since both components are siblings, the first component may trigger an event before the second component is available to listen to it, as the second component is mounted after the first.

To work around this issue, consider using the mounted() lifecycle hook instead of the created() hook.

For more information on Vue lifecycle events, you can visit: https://v2.vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

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

Whenever I anticipate receiving an array, Fetch always delivers a promise

I'm currently facing an issue with my simple API GET request. The array I need is always inside a promise and I can't figure out how to extract it or access the values stored within it. function getLocation(name) { let output = fetch(`http:// ...

javascriptreactjs

Exploring the dynamic loading of JavaScript functions with Ajax in Dojo while passing arguments

Currently, I am working on implementing a require/load function that handles the retrieval and execution of remote JavaScript code. The function is functioning well, but I have been using a workaround to pass arguments by setting global variables. However, ...

javascriptajaxdojoscope

Creating a hierarchical list structure from a one-dimensional list using parent and child relationships in JavaScript

I am in the process of developing a web application that requires handling nested geographical data for display in a treeview and search functionality. The initial raw data structure resembles this: id:1, name:UK id:2: name: South-East, parentId: 1 id:3: ...

javascriptalgorithm

Issue encountered while working with PostgreSQL and Sequelize when using the array_append function

I'm encountering issues with the following code snippet let user = req.user.id; await MyTable.update( {'interested': Sequelize.fn('array_append', Sequelize.col('interested'), user)}, {'where ...

javascriptnode.jspostgresqlsequelize.js

A guide on triggering a function when the context changes in a React application

Can I automatically trigger a function in a component whenever the context changes? Specifically, I have a variable named isLoggedIn in the Navbar module. Whenever a user logs in, the value of isLoggedIn is updated to true. In my Blog module, how can I m ...

javascriptreactjsstatereact-context

eliminate the offspring of a component (chessboard)

Hey there! I'm currently working on developing a chess game and I could really use your expertise to help me solve an issue. In my code, when I try to move a piece in the game, this is what happens: 1. First, I remove the existing piece from its cu ...

javascripthtmlcsschess

Creating a live dashboard in Laravel

I am currently working on creating a dashboard to monitor the status of IoT devices in Laravel. The front-end is built using Vue.js to call the Laravel API every minute, which in turn accesses the AWS IoT shadow. View the architecture diagram here Howev ...

laravelvue.jsaws-iot

Easily implement a wide variety of fonts in your web projects by dynamically loading hundreds of font

I am in possession of a directory called /assets/fonts containing a plethora of fonts that I wish to incorporate into a website in a dynamic manner. Users will be able to specify their font preferences, akin to a text editor. Individually assigning the fo ...

javascriptjqueryangularfonts

The evaluation of jQuery did not function properly on the less.css file

I have a jQuery function that I am using as shown below @winheight:`$(window).height()` within my less file. However, when I compile it to CSS, I encounter a compiler error I am currently using a software called Crunch Compiler Errors You are usin ...

javascriptjquerycssless

Why am I unable to utilize an array in this manner in JavaScript, and what is the method for accessing the array using a calculated number?

var nodesXY = ['15% 15%','30% 16%','19% 42%','39% 80%',]; var number = ["0","1","2","3","4","0","0","0"]; //some loop AccesNodes(number[1]); function AccesNodes(number){ console.log(number); // ...

javascriptarrays

Having trouble retrieving information from Node.js service in AngularJS 2

I am currently expanding my knowledge of Angular and attempting to retrieve data from a node js service using Angular 2 services. When I access the node js services directly from the browser, I can see the results. However, when I attempt to fetch the dat ...

javascriptjsonnode.jsangulartypescript

Utilizing Vue 3 props validation in conjunction with the power of Typescript

Looking to customize a Link component using Nuxt, Typescript, and the composition-api. The prop target can accept specific values as outlined below. I'm curious if using a custom validator function to check prop types at runtime adds value when compar ...

typescriptvue.jsvuejs3

Node.js server utilizing Jade template variables

My goal is to display a contacts list using Jade code. I have transformed each contact div into Jade code, but now I need to populate the relevant fields. Can this be done on the server side? My server code is written in Node.js. Here is an example of the ...

javascriptnode.jsexpresspug

Revamp your code by utilizing ES6 class to replace multiple if statements in Javascript

Currently, my code is filled with numerous if statements and I am considering a switch to classes in ES6. However, Javascript isn't my strong suit... so PLEASE HELP ME..! Previous code: //example code function first(){ console.log('first sce ...

javascriptnode.jsoopif-statementdesign-patterns

Issues with changing background colors using Jquery animate

I am attempting to create a fading background color effect when a button is clicked. Currently, I can change the background color using this code: $("#" + lblqty).css("background","#e9f1ff"); However, when I try to use the animate function as shown below ...

javascriptjqueryhtmlcss

Connecting the SignalR client to various servers

I am currently incorporating SignalR version 2.x into my ASP.Net MVC application, which is also using the same version of SignalR in my Angular client app. The ASP.Net MVC application is hosted at http://localhost:42080, while the Angular app is hosted at ...

javascriptc#node.jsangularsignalr

Remove the "hover effect" from an element using programming on mobile devices

There is an element on my webpage that has a specific set of styles for when it is hovered over. However, on mobile devices, this triggers the "sticky hover" effect, where touching the element applies the hover effect until the user touches another part of ...

javascripthtmlmobile

What is the best way to retrieve system information from a properties file and display it on a JSP page before the Javascript code is

As someone who is relatively new to JSPs and their capabilities, I am currently working on developing a suite of 4 separate webapp dashboards, each with its own standalone URL and index.(jsp|html) pages. The backend of these dashboards, which is written in ...

javascriptjavaajaxjspservlets

React Portal animation

Greetings. My issue involves the implementation of a full-screen menu in my NextJS project using React Portal. The menu slides out from the right side of the screen and I wanted to create animations for its appearance and disappearance. Instead of using li ...

javascriptreactjsnext.js

Encountering the "Uncaught TypeError: Cannot read properties of undefined (reading 'map')" error message while implementing Chart.js within a React Axios function

Struggling with creating a Chartjs chart in React using Axios post method to retrieve data from a Nodejs server. However, encountering the following error: "Uncaught TypeError: Cannot read properties of undefined (reading 'map')" Here's a s ...

javascriptnode.jsreactjsaxioschart.js