[Vuejs]-Getting values from modal to main view in VUE

by

0👍

✅

Since you are new to Vue.js I recommend you reading about props-down and events-up pattern which describes flow of data between Vue components.

  1. Props-down part is describing data flow PARENT -> CHILD, meaning child components should receive data from parent components via props.
  2. Events-up part is describing data flow CHILD -> PARENT, meaning child components should send data to parent components by emitting events.

To get back to your concrete situation, you need to emit an event from Datatable.vue component which you will handle in Main.vue:

In your Datatable.vue you should add this:

 getDataRecord(id) {
      let self = this;
      axios.get(this.$apiAdress + '/api/carriers/' + id + '/edit?token=' + localStorage.getItem("api_token"))
        .then(function (response) {
          self.selectedContent = response.data.record;
          self.$emit('content-selected', self.selectedContent);  <-- add this line
        }).catch(function (error) {
        console.log(error);
        self.$router.push({path: '/login'});
      });
  },

Now, in your Main.vue you need to handle the event like this:

<data-table-select
      :fetch-url="datatTableUrl"
      :columns="['id', 'email', 'name', 'surname']"
      :headers="{'id': 'ID','email': 'Email','name': 'Imię','surname': 'Nazwisko'}"
      :routeName="routeName"
      @content-selected="handleContentSelected($event)"  <-- add this line
></data-table-select>

Now, add your function that will handle the event, in your methods add:

handleContentSelected(content) {
     console.log(content); <-- your data should be here
}

Leave a comment