How to Access Child Component and Root Events

[ghost]

How can I access the various events that are emitted by child components and the root component.

// emitted by <Root>
builder.sidebar.open 
builder.sidebar.save 
...

The only event I've been able to access so far is the change event on the main FormBuilder component.

This fires too often to use accurately to create and update form states and persistence.

I've tried to get the root events with both:

this.$root.$on('builder.sidebar.save', payload => {
    console.log(payload)
})

// and 

this.$on('builder.sidebar.save', payload => {
    console.log(payload)
})

Neither one of these seem to catch the event as I get nothing in my log.

Need some help and you need to improve the documentation to reference all your child components and their events.

Thanks.

[sethsandaru]

Hi @19peaches ,

If you want to listen to those events across the FormBuilder, you need to use the $formEvent instead, here is the demo:

https://github.com/sethsandaru/vue-form-builder/blob/master/src/views/builder/FormConfiguration.vue#L86-L89

Basically, it's just a Vue instance and standing there for the Event-Bus purpose (how the not-related component can communicate with each other)

Thanks. Feel free to open this again if there is anything unclear.

[ghost]

Great thanks, that helps with root events, but I'm still not able to listen to events emitted by child components.

Also, when loading up the component, I'm pushing the data saved in my Vuex store and database to the config, but it doesn't render the existing data to the builder?

When I open the sidebar from the FormConfiguration button, I see the data loaded in the forms, but it's not rendering in the form builder. I need my users to be able to edit the forms that have been previously persisted.

Thanks

[ghost]

Nevermind ... I think I've figured it out.

[meomkarchavan]

@19peaches Can you share the solution?