I'm having trouble calling a function from another component.
When I click on a button in my parent component, formTelemarketing(), it should send data to my other component nAsignedCalls() and call the function getCalls(param) in that component. This function then calls a composable function.
const getCall = async (param_search) => {
let response = await axios.get('/api/callApi', {param_search: {'param_search': param_search} })
console.log(response.data.data)
calls.value = response.data.data
}
My problem is that I don't know how to call this function. In my parent component, I have:
<input type="button" class="btn btn-dark" value="Search Records" @click="searchRegisters()">
const nAsignedCalls = ref(null);
function searchRegisters(){
var address = "";
var city = "";
var cp = "";
address = document.getElementById("address").value
if( address != "" ) {
param_search = "address";
}
city = document.getElementById("city").value
if( city != "" ) {
param_search = "city";
}
cp = document.getElementById("postal_code").value
if( cp != "" ) {
param_search = "cp";
}
nAsignedCalls.getCalls(param_search);
}
In my destination component:
return {
...
getCalls
}
But when I click the button, I get the following error in the console:
nAsignedCalls.getCalls is not a function
at Proxy.searchRegisters (app.js:20068:21)
at onClick._cache.<computed>._cache.<computed> (app.js:21727:19)
at callWithErrorHandling (app.js:7336:22)
at callWithAsyncErrorHandling (app.js:7345:21)
at HTMLInputElement.invoker (app.js:15616:86)
Update:
Here is my composable code:
export default function useNcalls(){
let calls = ref([])
let param_search = ref([])
let pagination = ref([])
const getCall = async (param_search) => {
let response = await axios.get('/api/callApi', {param_search: {'param_search': param_search} })
console.log(response.data.data)
calls.value = response.data.data
}
const deleteCall = (id) => axios.post(`/api/callApi/${id}`, {_method: 'delete'}).then(res => {
confirm("Are you sure you want to delete the record?");
location.reload();
}).catch(err => {
console.log(err);
});
const queryForKeywords = async (event) => {
const response = await axios.get('/api/callApi/show', { params: { 'searchParams': event } })
calls.value = response.data.data
};
const getResults = async (page) => {
const response = axios.get('api/callApi?page=' + page)
calls.value = response.data
};
const getItems = async (page) => {
axios.get('/api/callApi?page='+page)
.then(response => {
calls.value = response.data.data;
pagination.value = response.data.meta;
});
};
expose({ getCalls })
return{
calls,
getCall,
deleteCall,
queryForKeywords,
getResults,
getItems
}
}
What am I doing wrong? Thank you for reading and sorry for my poor English.