I am currently working on a form that populates a table with data retrieved from a Laravel API. I am using Vue.js 3 and Composition API to build my entire application. When the button is clicked, I want the table to be filled with data from the form. The button has an @click function called
@click="searchRegisters()">{"data":[{"id":895,"name":"Aguilera Muriel Fatimas","address":"CALLE CALLEJAS, 8"While my composable and function calls seem to be working fine, I am facing difficulties displaying the fetched data in my component named nAsignedCalls. To pass the data to this component, I use the searchRegister function that emits the data like this:
context.emit("registers", getRegisters(toRef(param_search,'param_search')))In my setup(), I have defined a custom emit method as follows:
const emitMyEvent = (event) => emit('registers', event);The getRegisters function within the composable returns the fetched data:
const getRegisters = async (param_search) => {
var keys = Object.values(param_search);
var formData = new FormData();
formData.append("parameter", keys[0].parameter);
formData.append("value", keys[0].value);
let response = await axios.post('/api/listingApi/getRegister', formData, {'content-type': 'multipart/form-data'})
registers.value = response.data.data
}
In the component nAsignedCalls, while defining it with export default defineComponent, I specify that it emits the 'registers' event:
emits: ['registers']Furthermore, I return various functions and values related to the data handling:
return {
remove,
searchId,
searchName,
searchPhone,
edit,
getResults,
getPage,
emitMyEvent,
getRegisters,
registers,
}
To display the data in my template, I use a v-for loop to construct the table body:
<tbody>
<template v-for="item of registers">
<tr>
<td>{{ item.id }}</td>
...
// Remaining code omitted for brevity
</tr>
</template>
</tbody>
Despite successfully fetching the data in the network tab, I'm struggling to display it in the table or pass it correctly. I am relatively new to Vue.js 3 and still learning from extensive documentation.
UPDATE
I noticed that when assigning the result to my ref variable, a promise is obtained. So, I added the following then() function to handle this:
getRegisters(toRef(param_search,'param_search')).then(response => this.register_data = response)
console.log(this.register_data)
However, the console now shows a blank output. Any guidance or help will be greatly appreciated. Apologies for any language errors in my message.