I'm currently working on a page that displays user details and need to also show the invoices associated with that user.
<template>
<div>
<div>
// Child component one .....
</div>
<div>
// Child component two .....
</div>
<div>
// Invoice component one .....
<invoice-list :vendor-id="vendorData.id"/>
</div>
</div>
</template>
In order to fetch the data from the API, I have a JS file imported into the invoice template. However, I'm facing a challenge in passing the vendorId as a parameter in the JS file.
Below is a snippet of the invoice template:
<template>
<div class="wrapper">
<!-- Table Container grid -->
---------
---------
---------
</div>
</template>
<script>
import { onUnmounted } from '@vue/composition-api'
import store from '@/store'
import useInvoicesList from './useInvoiceList'
import invoiceStoreModule from '../invoiceStoreModule'
export default {
props: {
vendorId: {
type: String,
required: false,
},
},
setup(props) {
const {
fetchInvoices,
refetchData,
} = useInvoicesList()
return {
fetchInvoices,
refetchData,
}
},
}
</script>
Here is a glimpse of the useInvoiceList.js file where I am struggling to access the vendor ID:
import { ref, watch, computed } from '@vue/composition-api'
import store from '@/store'
export default function useInvoicesList() {
const refInvoiceListTable = ref(null)
const fetchInvoices = (ctx, callback) => {
store
.dispatch('app-invoice/fetchInvoices', {
q: searchQuery.value,
**/*This is where I need the vendor ID*/**
})
.then(response => {
})
.catch(() => {
})
}
return {
fetchInvoices,
refInvoiceListTable,
refetchData,
}
}
Any suggestions on how I can access the vendor ID in the fetchInvoices method?