I currently have 2 main components in my application:
- Proyectos.vue
- Reuniones.vue
In the Proyectos component, I make a `GET` request which retrieves an array of project objects. This list of projects is then displayed in a table.
Structure of Project Object:
{
objetivo:"",
fecha: "",
reuniones: [
{
titulo: "",
fecha: ""
},
{
titulo: "",
fecha: ""
}]
}
For each row in the table, I have a JavaScript object representing a project. When a user clicks on a button, I want to send this project object to the Reuniones component. In the Reuniones component, I will perform certain actions such as iterating over the data.
Avoiding ID in URL
I am exploring ways to avoid sending the project ID through the URL and making a new GET request for the object. Instead, I want to utilize the object already available in the Proyectos component.
Using Custom Events
I attempted to use custom events by using `$emit` and `$on`, but encountered issues because the Reunions component was not loaded yet, preventing it from listening to events emitted from the Proyectos component.
Code snippet from Proyectos.vue:
projectSelected (project) {
// Emitting an event with the project object
this.$root.$emit ('send', project)
// Navigating to the 'reuniones' route to load the Reuniones.vue component
this.$router.push('reuniones')
}
Code snippet from Reuniones.vue:
this.$root.$on('send', (data) => {
console.log (data)
})
The desired behavior is to effectively pass an object between different components within the application.