<p>I'm trying to do this by sending data from my parent component <code>formTelemarketing</code> to my child component <code>nAsignedCalls</code> and I'm doing this in the parent <code> Execute a prop in props: { register: Number },</code> When I click the submit button (not the submit button) a form should be populated, my action button calls the function <code>searchRegisters</code> and Get the value from the form and use $emit to send the prop to my component</p> <pre class="brush:php;toolbar:false;">this.$emit("registers", getCall(toRef(param_search,'param_search')))</pre> <p>In the child component contained within my parent component, I have: </p> <pre class="brush:php;toolbar:false;"><div id="app5"> <nAsignedCalls @registers="getCall"></nAsignedCalls> </div></pre> <p>In my export default child component I have props:['register'] and in this component in my table I have a for-each that should get all the data from this prop...I No errors appear in the console but I can't display my data</p> <pre class="brush:php;toolbar:false;">{{ (register) ? register : "vacio" }} <template v-for="item of register"> <tr> <td>{{ item.id }}</td> <td>{{ (item.name) ? item.name : '' }} </td></pre> <p>For example, this is my structure, I have a condition to know if the registration is filled, always returns "vacio".</p> <p>This is my props definition in the child component: </p> <pre class="brush:php;toolbar:false;">export default defineComponent({ name: 'nAsignedCalls', props:['register'],</pre> <p>My API is fine, in the console network tab I can show the response ok <code>{"data":[{"id":895,"name":"Aguilera Muriel Fatimas",< ;/code> i have more data...</p> <p>I don't know what I'm doing wrong, I'm new to vue...</p> <p>Thank you for your review and sorry for my poor English</p> <p><strong>Update</strong></p> <p>First, I use the composition API in my project. </p> <p>Now, in my child component I define my event</p> <pre class="brush:php;toolbar:false;">// personalized event const emitMyEvent = (event) => emit('registers', event); return { remove, searchId, searchName, searchPhone, edit, getResults, getPage, emitMyEvent, getCall }</pre> <p>In my app.js, I redefined app5: </p> <pre class="brush:php;toolbar:false;">const app5 = createApp({ components:{ nAsignedCalls }, setup() { const getCall = (event) => console.log('getCall(): ' event.target.id); return { getCall } } }) app5.mount('#app5')</pre> <p>But when I click the button I can't display anything in the web or console</p> <p><strong>My button: </strong></p> <pre class="brush:php;toolbar:false;"><input type="button" class="btn btn-dark" value="Buscar registros" @click="searchRegisters() "></pre> <p>With everything scripted in my parent component, I am clicking the button and calling the function.</p> <p>使用父组件中的所有代码更新我的问题：</p> <pre class="brush:php;toolbar:false;"><template> <div class="container mt-3 bg-white shadow rounded p-3"> <div class="row justify-content-start mt-4"> <div class="col-md-6 ml-3"> <div class="form-group"> <div class="row justify-content-center"> <select class="form-control" name="teleoperator" id="teleoperator_select" placeholder="Teleoperadora"> <option hidden>Teleoperadora</option> </select> </div> </div> </div> </div> <div class="row justify-content-start align-items-center mt-4"> <div class="col-md-4"> <div class="form-item"> <input type="text" name="address" id="address" required> <label for="address">Dirección</label> </div> </div> <div class="col-md-4"> <div class="form-item"> <input type="text" name="city" id="city" required> <label for="city">Ciudad</label> </div> </div> <div class="col-md-4"> <div class="form-item"> <input type="text" name="cp" id="postal_code" required> <label for="postal_code">Código Postal</label> </div> </div> </div> <div class="row justify-content-center"> <input type="button" class="btn btn-dark" value="Buscar registros" @click="searchRegisters"> </div> </div> <div class="container mt-3 bg-white shadow rounded p-3 "> <div class="row justify-content-center"> <div class="col-md-12"> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#nasigned">No asignadas</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#asigned">Asignadas</a> </li> </ul> </div> <div class="container" style="width: 95% !important;"> <div class="tab-content"> <div class="tab-pane fade-in" id="asigned"> <div id="app4"> <asignedCalls></asignedCalls> </div> </div> <div class="tab-pane fade-in active" id="nasigned"> <div id="app5"> <nAsignedCalls @registers="getCall"></nAsignedCalls> </div> </div> </div> </div> </div> </div> </template> <script> import { onMounted, defineComponent, toRef } from 'vue'; import useNregister from '../composables/ncalls' import asignedCalls from './roomBooss/asignedCalls'; import nAsignedCalls from './roomBooss/nasignedCalls'; export default defineComponent({ components: {asignedCalls, nAsignedCalls}, data(){ return{ items: [], pagination: { current_page: 1, }, register: 0, } }, props: { register: Number }, setup(props, { emit }, context) { const emitMyEvent = (event) => emit('registers', event); var param_search = {}; const { getCall, deleteCalls, queryForKeywords, getResults, getItems } = useNregister() function remove(id) { deleteCalls(id) } function searchId(action) { let id = document.getElementsByClassName('id_search')[0].value const params = [action, id]; queryForKeywords(params) } function searchName(action) { let id = document.getElementsByClassName('name_search')[0].value const params = [action, id]; queryForKeywords(params) } function searchPhone(action) { let id = document.getElementsByClassName('phone_search')[0].value const params = [action, id]; queryForKeywords(params) } function edit(action) { window.location.href = '/roomboss/telemarketing/call/' action "/edit"; } function show(action) { window.location.href = '/roomboss/telemarketing/call/' action; } function getPage(page){ getItems(page); } function searchRegisters(){ var address = ""; var city = ""; var cp = ""; 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 } context.emit("registers", getCall(toRef(param_search,'param_search'))) } return { remove, searchId, searchName, searchPhone, edit, show, getResults, getPage, getCall, searchRegisters, emitMyEvent } } }) </script></pre> <p><strong>Update</strong></p> <p>The data I sent can be displayed in the network tab, but my table is empty</p> <pre class="brush:php;toolbar:false;"><tbody> <template v-for="item of registers"> <tr> <td>{{ item.id }}</td> <td>{{ (item.name) ? item.name : '' }} </td> <td>{{ (item.address) ? item.address : ''}}</td> <td>{{ (item.province) ? item.province : ''}} </td> <td>{{ (item.city) ? item.city : ''}} </td> <td>{{ (item.cp) ? item.cp : ''}} </td> <td>{{ (item.phone) ? item.phone : ''}} </td> <td> <span class="text-light" :class="item.status.class_span"> {{ (item) ? item.status.name : 'null' }} </span> </td> <td> <div class="hover-text"> <div class="icon-actions"> <div class="row justify-content-center"> <div class="col-md-6 offset-md-1"> <i class="fas fa-cog"></i> </div> </div> </div> <div class="container-actions"> <div class="col-md-3"> <button class="tooltip-text btn" id="edit" @click="edit(item.id)"><i class="fas fa-2x fa-edit"></i></button> </div> </div> </div> </td> </tr> </template> </tbody></pre> <p>My script in component <code>nAsignedCalls</code>, I tried using <code> in for and <code>emitMyEvent</code> and <code>newRegisters</code> registers</code></p> > <pre class="brush:php;toolbar:false;"><script> import useNregister from '../../composables/ncalls' import { onMounted, defineComponent } from 'vue' export default defineComponent({ name: 'nAsignedCalls', emits: ['registers'], data(){ return{ items: [], pagination: { current_page: 1, }, newRegisters: Object.assign({}, this.registers), } }, setup(props, { emit }) { const { getCall, deleteCalls, queryForKeywords, getResults, getItems } = useNregister() function remove(id) { deleteDates(id) } function searchId(action) { let id = document.getElementsByClassName('id_search')[0].value const params = [action, id]; queryForKeywords(params) } function searchName(action) { let id = document.getElementsByClassName('name_search')[0].value const params = [action, id]; queryForKeywords(params) } function searchPhone(action) { let id = document.getElementsByClassName('phone_search')[0].value const params = [action, id]; queryForKeywords(params) } function edit(action) { window.location.href = '/roomboss/calls/' action "/edit"; } function getPage(page){ getItems(page); } //personalized event const emitMyEvent = (event) => emit('registers', event); return { remove, searchId, searchName, searchPhone, edit, getResults, getPage, emitMyEvent, getCall } } }); </script></pre></p>

setup(props, { emit })

emit("registers", getCall(toRef(param_search,'param_search')))

context.emit("registers", getCall(toRef(param_search,'param_search')))

emits: ['registers']

const { createApp, ref } = Vue;

const MyComp = {
  setup(props, { emit }) {
    const emitMyEvent = (event) => emit('registers', event);
    return { emitMyEvent }
  },
  template: `<button id="my-button" @click="emitMyEvent">emit</button>`
}

const App = { 
  components: { MyComp },
  setup() {
    const getCall = (event) => console.log('getCall(): ' + event.target.id);
    return { getCall }
  }
  
}
const app = createApp(App)
app.mount('#app')

#app { line-height: 2; }
[v-cloak] { display: none; }

<div id="app" v-cloak>
  <my-comp @registers="getCall"></my-comp> 
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

const { createApp, ref } = Vue;

const MyComp = {
  emits: ['registers'],  
  methods: {
    emitMyEvent: function(event) { this.$emit('registers', event) }
  },
  template: `<button id="my-button" @click="emitMyEvent">emit</button>`
}

const App = { 
  components: { MyComp },
  methods: {
    getCall: (event) => console.log('getCall(): ' + event.target.id)
  } 
}
const app = createApp(App)
app.mount('#app')

#app { line-height: 2; }
[v-cloak] { display: none; }

<div id="app" v-cloak>
  <my-comp @registers="getCall"></my-comp> 
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>