I´m trying to send data to my component table when i clicked a button. My another component should fill a table with data received. i´m using composition API. To try this i´m building this code:
in my table component:
export default {
name: 'nAsignedCalls',
props: { registers: Object },
setup() {
return {
}
}
}
and in my template i have a v-for that i check it´s ok, sending static data:
<template v-for="item of registers">
<tr>
<td><input type="checkbox" name="assign_register" style="width: 20px; height: 20px;"></td>
<td>{{ item.id }}</td>
<td>{{ item.name }} </td>
<td>{{ item.address }}</td>
<td>{{ item.province }} </td>
<td>{{ item.phone }} </td>
i said that i check it with statics data:
in my parent component i did:
var data = {
"address":"CALLE CALLEJAS, 8",
"city":"PURULLENA",
"cp":"18519",
"created_at": "null",
"id":"895",
"mobile_phone":"null",
"name":"Aguilera Muriel Fatimas",
"phone":"958.690.236",
"province":"GRANADA",
"source":"",
"updated_at":"2021-11-05T07:35:30.000000Z",
}
const registers = reactive({data})
return {
registers
}
result, my table it´s filled.
but when i´m using axios... it´s always empty. I created a composable with function to get my data sending from my parent component, parameter to create query in my API with laravel. From my API i receive my data how my data object but with 160 element
Proxy(Array) {0: {…}, 1: {…}, 2: {…}, 3: {…}, 4: {…}, 5: {…}, 6: {…}, 7: {…}, 8: {…}, 9: {…}, 10: {…}, 11: {…}, 12: {…}, 13: {…}, 14: {…}, 15: {…}, 16: {…}, 17: {…}, 18: {…}, 19: {…}, 20: {…}, 21: {…}, 22: {…}, 23: {…}, 24: {…}, 25: {…}, 26: {…}, 27: {…}, 28: {…}, 29: {…}, 30: {…}, 31: {…}, 32: {…}, 33: {…}, 34: {…}, 35: {…}, 36: {…}, 37: {…}, 38: {…}, 39: {…}, 40: {…}, 41: {…}, 42: {…}, 43: {…}, 44: {…}, 45: {…}, 46: {…}, 47: {…}, 48: {…}, 49: {…}, 50: {…}, 51: {…}, 52: {…}, 53: {…}, 54: {…}, 55: {…}, 56: {…}, 57: {…}, 58: {…}, 59: {…}, 60: {…}, 61: {…}, 62: {…}, 63: {…}, 64: {…}, 65: {…}, 66: {…}, 67: {…}, 68: {…}, 69: {…}, 70: {…}, 71: {…}, 72: {…}, 73: {…}, 74: {…}, 75: {…}, 76: {…}, 77: {…}, 78: {…}, 79: {…}, 80: {…}, 81: {…}, 82: {…}, 83: {…}, 84: {…}, 85: {…}, 86: {…}, 87: {…}, 88: {…}, 89: {…}, 90: {…}, 91: {…}, 92: {…}, 93: {…}, 94: {…}, 95: {…}, 96: {…}, 97: {…}, 98: {…}, 99: {…}, …}
if i don´t use static data, how i said, i´m using this function to send data to my composable and assign data to my reactive variable.
const fetchData = async (param_search) => {
address = document.getElementById("address").value
if( address != "" ) {
param_search["parameter"] = "address";
param_search["value"] = address;
}
city = document.getElementById("city").value
if( city != "" ) {
param_search["parameter"] = "city";
param_search["value"] = city;
}
cp = document.getElementById("postal_code").value
if( cp != "" ) {
param_search["parameter"] = "cp";
param_search["value"] = cp
}
registers.value = await getRegisters(toRef(param_search,'param_search'))
console.log(registers.value)
//emit('submit',registers.value);
}
and in return i have:
return {
//message,
//showMessage,
//count,
fetchData,
registers,
//submit
//increment,
}
i´m thinking that i need a personaliced event to send this data to my component table, but when i send static data, it´s not necessary... I don´t know
to add my data to my component table i´m doing this:
<div id="app5">
<nAsignedCalls :registers="registers"></nAsignedCalls>
</div>
but never arrive my data, this it´s my problem. When it´s statics yes, but if i want this data to be send when i click my button, never arrive to my table component... What i´m doing wrong?
UPDATED
i´m building a personaliced event, and now console.log() returned this:
app.js:7203 [Vue warn]: Extraneous non-emits event listeners (submit) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the "emits" option.
at <NAsignedCalls onSubmit=fn<submit> registers= (160) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …] >
at <FormTelemarketing>
at <App>
i´m building my event so:
in parent:
setup(ctx, {emit}) {
const emits = defineEmits(["submit"])
in my function that call composable:
registers.value = await getRegisters(toRef(param_search,'param_search'))
console.log(registers.value)
emit('submit',registers.value);
updated 2
const registers = reactive({data})is NOT identical to api response. There is an object with data key in one case and and array in another. It's unknown what's the content of the array. stackoverflow.com/help/mcve is necessary, otherwise the question violates SO rulescodesandbox ./in the root of your project. You'll need to create an account on codesandbox. It's quite simple. The example doesn't have to work, we don't need the backend, we can mock it with some functions. But I need to see your components and yourpackage.jsonto be able to help.:registers="registers"works fine. You had a lot of other problems (e.g: passing array and expecting object,item of registersinstead ofitem in registersread the docs). I simplified the form usage (usev-model!) and replaced your server call with aPromise.resolve(). The gist of it: you should go through the basics of Vue before taking on a project of this size. The free modules of vue mastery would definitely help.