Observe to some event from another component in Vue

Question

I have two components:

<div>
    <advertiser-add-component></advertiser-add-component>
    <advertisers-component></advertisers-component>
</div>

These components have the following interface:

First component is a button. I will see a modal dialog when I click on it. The modal contains an Ajax form:

Second component is a table. You already saw it on the first picture So, I would like to rerender the table component after sending the form without page refreshing. Is there some way to "subscribe" to this event (once the modal information is sent) from advertisers-component? How I can organize it with minimum code?

Possible duplicate of Vue components communication

str
– str

2018-12-14 13:12:46 +00:00
Commented Dec 14, 2018 at 13:12 — str
– str, Commented Dec 14, 2018 at 13:12

Walter Cejas · Accepted Answer · 2018-12-14 13:54:36Z

4

Im using vue-events package: https://github.com/cklmercer/vue-events

Install the package globally
Add events object in your component with the events to listen, and fire the event from the modal, check this example:

answered Dec 14, 2018 at 13:54

Walter Cejas

2,1531 gold badge17 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aleksej_Shherbak Over a year ago

It's look like easy!

jonnycraze · Accepted Answer · 2018-12-14 13:27:38Z

2

Yes absolutely, for something like this you could spin up a simple event bus, your component would emit an update to the bus, and the other watches for updates to that event type on the bus.

Here's a good example of how to do it:

https://alligator.io/vuejs/global-event-bus/

answered Dec 14, 2018 at 13:27

jonnycraze

5083 silver badges17 bronze badges

5 Comments

Aleksej_Shherbak Over a year ago

Nice tutorial, but I can't understand where I can put the EventBus.$on. Which part of component it is?

jonnycraze Over a year ago

The listener, or $on, should go in your mounted method on your listening component

Aleksej_Shherbak Over a year ago

mounted() { this.getAdvertisersTable(); EventBus.$on('newAdvertiser', this.getAdvertisersTable()) } it's here but it gives me the error ' Error in event handler for "newAdvertiser": "TypeError: Cannot read property 'apply' of undefined"'

jonnycraze Over a year ago

Do this: eventbus.$event bus.('event', this.getAdvertisersTable); dont invoke the method with the parens. Then in your function, add one parameter of value. This is what the event passed forward.

jonnycraze Over a year ago

From the sample linked: EventBus.$on('i-got-clicked', clickHandler);

tony19 · Accepted Answer · 2022-07-15 05:29:15Z

1

I would encourage you to check this: https://v2.vuejs.org/v2/guide/state-management.html

Basically you have a component (or java class) called a store that holds the data of the table. That data is the one displayed by the table. When submitting the modal, you ask the store to fetch the data again (by sending an event) from your backend where I assume the data is stored.

Since the table displays the data of the store already, the table will update itself automatically.

I have done just that in an application of mine here: https://github.com/Draluy/Jobsearch/blob/master/front/src/components/applications/Application.vue

edited Jul 15, 2022 at 5:29

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 14, 2018 at 13:30

David Raluy

1845 bronze badges

Comments

Kris D. J. · Accepted Answer · 2018-12-14 13:34:37Z

0

It seems like you want to wrap your two components in another component that handles the data and the ajax request.

<wrap-component> <!-- This component contains the data and handles the ajax request -->
   <advertiser-add-component @click-triggered="ajaxRequest"></advertiser-add-component> <!-- This components emits a click event to the <wrap-component>-component that executes the ajax requests -->
   <advertisers-component :tableData="tableData"></advertisers-component> <!-- This component is passed the data via the tableData prop -->
</wrap-component>

<!-- Inside "wrap-component" -->
data() {
  return {
    tableData: []
  }
},
methods: {
  ajaxRequest() {
   // make the data request here and replace this.tableData with the response data
  }
}

<!-- Inside "advertiser-add-component" -->
methods: {
  // Execute this function, when the button is clicked
  add() {
    this.$emit('click-triggered');
  }
}

<!-- Inside "advertisers-component" -->
props: {
   tableData: {
      type: Array // if the data is an array of course..
   }
}

answered Dec 14, 2018 at 13:34

Kris D. J.

823 gold badges7 silver badges20 bronze badges

1 Comment

Aleksej_Shherbak Over a year ago

It's ok but not my way) I would like to have solution without a wrapper. Thank you.

Collectives™ on Stack Overflow

Observe to some event from another component in Vue

4 Answers 4

1 Comment

5 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related