Custom Actions - Call method from another component

[maryheng]

Hi all,

Is there a way to call a method from another component? For example, I have a CustomActions component and because I want to make the component reusable, i want to invoke the method in another component, E.g. A Staff Page that has the vuetable in it. (Staff.vue).

How do i exactly invoke/call the itemAction method and send the rowData and rowIndex params in other components to make it reusable?

This is my code in CustomActions.vue:

<template>
    <div class="custom-actions">
      <button class="button is-info" @click="itemAction('edit-item', rowData, rowIndex)">Edit</button>
    </div>
  </template>

<script>
import router from '../../router'
import { staffUrl } from '../../config'
import axios from 'axios'

export default {
  props: {
    rowData: {
      type: Object,
      required: true
    },
    rowIndex: {
      type: Number
    }
  },
  methods: {
    **itemAction (action, data, index)** {
      console.log('custom-actions: ' + action, data.name, index)
      console.log(data.userId)
      router.push({ path: '/user/UpdateStaff' })
      axios.get(staffUrl + '/' + data.userId)
        .then(function (response) {
          console.log(response)
        })
        .catch(function (error) {
          console.log(error)
        })
    }
  }
}
</script>

How do i go about doing this?

Thank you for your help! Appreciate it!