The Vue EventBus does not support passing object attributes

Looking for assistance with integrating two Vue single page components.

The 'Searchbar' component features a dialog box where users input data. This data is required in the 'ResultList' component for further processing. To achieve this, I intend to utilize Vue EventBus for communication.

The user input consists of an object with two properties:

userInput: {
    userName: '',
    taskNr: ''
  },

This data should be transferred to the 'ResultList' component using the EventBus:

emitUserInput: function () {
  EventBus.$emit('emitUserInput', this.userInput)
}

In the 'ResultList' component, there is a listener method responsible for storing the received object within the component's data-Object:

userInputListener: function () {
  EventBus.$on('emitUserInput', setUser => {
    this.userInput.userName = $userInput.userName
    this.userInput.taskNr = $userInput.taskNr
  })
}

However, the attributes 'userName' and 'taskNr' within the userInput-object of 'ResultList' are not being updated as expected. They remain empty strings.

Welcome any suggestions or ideas. Thank you!

Update

Below is the code from the 'Searchbar' component calling the 'emitUserInput()' method:

<el-form-item>
      <el-button @click='emitUserInput(), toggleInputForm = false'>Confirm</el-button>
</el-form-item>

And here is the data object within the 'Searchbar' component:

data () {
  return {
    userInput: {
      userName: '',
      taskNr: ''
  } 
}

Answer №1

At what point do you invoke userInputListener? One way to test it is by placing EventBus.$on within the mounted() lifecycle hook to see if it functions as intended:

mounted() {
  EventBus.$on('emitUserInput', payload => {
    this.userInput.userName = payload.userName
    this.userInput.taskNr = payload.taskNr
  })
}

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

Testing Vue components with Typescript and Jest does not display the expected values in the HTML output

Recently, I decided to focus on Test-Driven Development (TDD) using Typescript, so I started a new Vue project with vue-cli. I specifically chose Vue3, Typescript, and Jest for this project. However, when I ran the unit test initially, it failed to execute ...

Updating a value using jQuery AJAX techniques

Using jQuery AJAX, I am loading the content of a page in this way: $(document).ready(function(){ $('#next').click(function(event){ $.ajax({ url: "load.php?start="+$('#lastid').text(), success: function(html){ $("#results"). ...

Is there a way to reset useQuery cache from a different component?

I am facing an issue with my parent component attempting to invalidate the query cache of a child component: const Child = () => { const { data } = useQuery('queryKey', () => fetch('something')) return <Text>{data}& ...

Utilizing various Material UI Sliders on a single page with shared color properties

After creating a component called "SliderBox", I noticed that it returns a div containing a Material UI Slider with createMuiTheme and an input component. The "SliderBox" component utilizes an onHover method on the parent div to change the component' ...

transferring information within React applications

I created a basic online store and I am looking to transfer data from one JavaScript file to another. The first JS file displays the items, and then I want to pass the item data to cart.js which contains a table. <section className="products"> ...

Issues with Async Ajax functionality are being reported specifically in Safari browsers when a redirect

Encountering issues with an async Ajax call not functioning in Safari while working perfectly fine in other browsers. The problem arises when there is a redirect/link on the button or anchor that triggers the Ajax function. Here's a basic example: & ...

Output is not being displayed by Ajax

I created a basic PHP code that populates rows and columns with an asterisk (*). To test the PHP code, I entered the URL localhost/squareService.php?rows=3&cols=3 However, when I asked a user to input the number of rows and columns using HTML and Java ...

Ajax continues to operate even if an error is detected

Hello fellow programmers! I'm currently facing an issue with form submission and validation using jQuery with 2 ajax events. The problem lies in the fact that even if the first ajax event (timeconflict.php) returns an error, the second ajax event (res ...

Encountering an undefined json array when making an AJAX request

There have been numerous questions on this topic, but none of the specific solutions seemed to apply to my situation. So, I apologize if this is a duplicate query. I am currently working on fetching data from an SQL database using a PHP file that passes t ...

Acquire the content of an interactive website with Python without using the onclick event

I am looking to extract the content of a dynamically generated website after clicking on a specific link. The link is structured as follows: <a onclick="function(); return false" href="#">Link</a> This setup prevents me from directly accessin ...

"Troubleshooting a 400 Bad Request Error in Node.js and Express for a

It seems like I must be making a silly mistake, because this should be a simple task. All I want to do is send a POST request in an Express route. This is my app.js: var express = require('express'); var path = require('path'); var f ...

Discover the power of Shopware 6 with the sw-inherit-wrapper feature for the sw-snippet-field and sw-media-field components in Vue.js

Currently, I am developing a custom administration module (plugin configuration) in Shopware 6 using Vue.js. An issue I am facing is the absence of an inherit wrapper that appears when there is a change in the sales channel. My goal is to replicate the s ...

Having trouble with JavaScript concat function not behaving as it should? Can you provide more details to

I am trying to extract all the cities from an object that contains country names as keys and arrays of cities as values. However, my approach seems to be failing and I can't figure out why. var cities = { "United Kingdom": ['london'], ...

What criteria should I consider when selecting a make for the createTheme components?

After reviewing the documentation for the createTheme component, I noticed examples with MuiButtonBase, MuiButton, and MuiSlider. However, when it comes to adding a button, it's simply called Button, not MuiButton. So, does this mean I just need to p ...

What methods can be utilized to accurately determine a user's online status without continuously sending AJAX requests to the server through setInterval?

Seeking effective methods to determine a user's online status I am currently employing an inefficient technique to address this issue: I continuously send AJAX requests to the server at set intervals using setInterval, allowing the server to gauge th ...

Troubleshooting Vue: Why Your Computed Component Isn't Triggering

I have been utilizing the Vue extension in Chrome for some time now. However, when I disable it, all my computed components stop working properly. The data for these components is fetched from Django. Here's an example: import axios from 'axios&a ...

Error message encountered: 'GlobalStyles' is not a valid export from the module '@material-ui/system' (referenced as 'SystemGlobalStyles')

./node_modules/@material-ui/core/GlobalStyles/GlobalStyles.js Error encountered while trying to import: 'GlobalStyles' is not exported from '@material-ui/system' (imported as 'SystemGlobalStyles'). I am currently grappling wi ...

Utilizing React Typescript to Efficiently Manage Multiple Checkboxes within a List

I'm working on a scenario where I have to manage multiple checkboxes in a list Only one checkbox can be selected at a time For example, if I toggle on Checkbox 1 and then click on Checkbox 2 - I want to automatically toggle off Checkbox 1 as I toggl ...

Executing a function in Node-Express with a database connection at the beginning of the application

I am relatively new to Node.js and currently working on a Node.js - Express solution as a back-end for an AngularJS web application. My goal is to send an email when the MSSQL database query returns specific information. I have successfully implemented thi ...

Converting to alphanumeric characters using JavaScript

Is there a way to efficiently encode a random string into an alphanumeric-only string in JavaScript / NodeJS while still being able to decode it back to the original input? Any suggestion on the best approach for this would be greatly appreciated! ...