vue.js - call component method from another component

Question

I want to use the getProjects() method of Component 2 to refresh my table after adding a data. Both of these components are attached in a blade.php

Component 1.vue

 methods: {
  addData() {
    this.attemptSubmit = true;
    this.validate = true;
    this.errors = [];
    if (this.errors) event.preventDefault();
    axios
    .post('/api/department', {
                department: this.department,
                section: this.section
    })
    .then(response => {
      this.validate = false;
      this.department = '';
      this.section = '';
      this.errors = '';
      this.output = response.data;
      //--- I want to insert the getProjects() method here 
    })
    .catch(error => this.errors = error.response.data.errors)
  },

Component 2.vue

methods: {
    getProjects(url = '/api/departments') {
      this.tableData.draw++;
      axios
      .get(url, {params: this.tableData})
      .then(response => {
        let data = response.data;
        if (this.tableData.draw == data.draw) {
          this.projects = data.data.data;
          this.configPagination(data.data);
        }
      })
      .catch(errors => {
        console.log(errors);
      });
    },

It's good to create separate service for get project, and you can call it from both component. — Amit Kumar, Dec 12 '19 at 07:43
Do you mean that I should separate it in another component? I'll be having a lot of different forms with each forms having its own data table component. — Jim E Russel, Dec 12 '19 at 07:45
I checked about mixin. The way I see it, I need to create different mixin for different forms since each forms have different axio.get URL. — Jim E Russel, Dec 12 '19 at 07:52

score 4 · Answer 1 · answered Dec 12 '19 at 07:52

4

You should use vuex. See https://medium.com/js-dojo/vuex-2638ba4b1d76

You call the vuex action from your component and in this action, you can make the axios call directly or use another service to make your api calls.

Mutations should never be called from components only from actions inside the store.

kind regards

answered Dec 12 '19 at 07:52

Marvin

86
5

I'll try to study this one since I'm fairly new with vue.js Thank you very much! – Jim E Russel Dec 12 '19 at 08:05
Feel free to ask if you need further information or some help. – Marvin Dec 12 '19 at 08:26

score 3 · Accepted Answer · answered Dec 12 '19 at 08:12

yes it is possible. Step 3 will do what you explicitly asked but there are better ways.

Three ways.

1) VUEX: Move the method you wish to call, to Vuex and any associated reactive data properties to the store. And use getters to retrieve the updated data.

2) MIXINS: With mixins you would move your component2.vue and associated data properties to a mixin, and import it in both components, allowing it to be called from each.

3) Hacky fix that actually calls the method from another component (not best practice)

You can mount methods to $root and call them from another component, by emiting a event. Using your example it would look like the following.

Components2.vue // mount the method you wish to call


// new code
  mounted() {

    this.$root.$on("getProjects", () => {

      return this.getProjects(url = '/api/departments');
    });
  }

Component1.vue // call the mounted method

 methods: {
   // new code
    emitGetProjects() {
     this.$root.$emit("getProjects") //like this
    }
  },

more info here How can I call method in other component on vue.js 2? in case i made any typos

vue.js - call component method from another component

2 Answers2