I have two ponents:

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

These ponents have the following interface:

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

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

I have two ponents:

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

These ponents have the following interface:

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

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

• javascript
• vue.js
• vuejs2

Share Improve this question Follow edited Dec 14, 2018 at 13:22 Aleksej_Shherbak asked Dec 14, 2018 at 12:54 Aleksej_ShherbakAleksej_Shherbak 3,10899 gold badges4444 silver badges8484 bronze badges 1

• 1 Possible duplicate of Vue ponents munication – str Commented Dec 14, 2018 at 13:12

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

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

• Install the package globally

• Add events object in your ponent with the events to listen, and fire the event from the modal, check this example:

Yes absolutely, for something like this you could spin up a simple event bus, your ponent 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/

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

Basically you have a ponent (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./Draluy/Jobsearch/blob/master/front/src/ponents/applications/Application.vue

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

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

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

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

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