Senden Sie Daten von der Komponente zur Unterkomponente in Vue 3
<p>Ich versuche dies zu erreichen, indem ich Daten von meiner übergeordneten Komponente <code>formTelemarketing</code> an meine untergeordnete Komponente <code>nAsignedCalls</code> sende ;code> Führen Sie eine Requisite in props aus: {register: Number },</code> /code> und Holen Sie sich den Wert aus dem Formular und senden Sie die Requisite mit $emit an meine Komponente</p>
<pre class="brush:php;toolbar:false;">this.$emit("registers", getCall(toRef(param_search,'param_search')))</pre>
<p>In der untergeordneten Komponente, die in meiner übergeordneten Komponente enthalten ist, habe ich: </p>
<pre class="brush:php;toolbar:false;"><div id="app5">
<nAsignedCalls @registers="getCall"></nAsignedCalls>
</div></pre>
<p>In meiner standardmäßigen untergeordneten Exportkomponente habe ich props:['register'] und in dieser Komponente in meiner Tabelle habe ich ein for-each, das alle Daten von dieser Requisite erhalten sollte...I Es werden keine Fehler angezeigt Konsole, aber ich kann meine Daten nicht anzeigen</p>
<pre class="brush:php;toolbar:false;">{{ (register) ? register : "vacio"
<template v-for="Registerelement">
<tr>
<td>{{ item.id }}</td>
<td>{{ (item.name) ? item.name : '' }} </td></pre>
<p>Das ist zum Beispiel meine Struktur. Ich habe eine Bedingung, um zu wissen, ob die Registrierung gefüllt ist, und gibt immer „vacio“ zurück.</p>
<p>Dies ist meine Requisitendefinition in der untergeordneten Komponente: </p>
<pre class="brush:php;toolbar:false;">export default defineComponent({
Name: 'nAsignedCalls',
props:['register'],</pre>
<p>Meine API ist in Ordnung, auf der Registerkarte „Netzwerk“ der Konsole kann ich die Antwort ok anzeigen. <code>{"data":[{"id":895,"name":"Aguilera Muriel Fatimas",< ;/ Code> Ich habe mehr Daten...</p>
<p>Ich weiß nicht, was ich falsch mache, ich bin neu bei Vue...</p>
<p>Vielen Dank für Ihre Bewertung und entschuldigen Sie mein schlechtes Englisch</p>
<p><strong>Update</strong></p>
<p>Zuerst verwende ich die Kompositions-API in meinem Projekt. </p>
<p>Jetzt definiere ich in meiner untergeordneten Komponente mein Ereignis</p>
<pre class="brush:php;toolbar:false;">// personalisiertes Ereignis
const emitMyEvent = (event) => emit('registers', event);
zurückkehren {
entfernen,
Such-ID,
Suchname,
SucheTelefon,
bearbeiten,
Ergebnisse bekommen,
getPage,
emitMyEvent,
getCall
}</pre>
<p>In meiner app.js habe ich app5 neu definiert: </p>
<pre class="brush:php;toolbar:false;">const app5 = createApp({
Komponenten:{
nAsignedCalls
},
aufstellen() {
const getCall = (event) => console.log('getCall(): ' + event.target.id);
return { getCall }
}
})
app5.mount('#app5')</pre>
<p>Aber wenn ich auf die Schaltfläche klicke, kann ich nichts im Web oder in der Konsole anzeigen</p>
<p><strong>Mein Button: </strong></p>
<pre class="brush:php;toolbar:false;"><input type="button" class="btn btn-dark" value="Buscar registros" "></pre>
<p>Da alles in meiner übergeordneten Komponente geskriptet ist, klicke ich auf die Schaltfläche und rufe die Funktion auf.</p>
<p>使用父组件中的所有代码更新我的问题:</p>
<pre class="brush:php;toolbar:false;"><template>
<div class="container mt-3 bg-whiteshadow abgerundet 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 hide>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">
<Eingabetyp="Text" name="Adresse" id="Adresse" erforderlich>
<label for="address">Dirección</label>
</div>
</div>
<div class="col-md-4">
<div class="form-item">
<Eingabetyp="Text" name="Stadt" id="Stadt" erforderlich>
<label for="city">Ciudad</label>
</div>
</div>
<div class="col-md-4">
<div class="form-item">
<Eingabetyp="Text" name="cp" id="Postleitzahl" erforderlich>
<label for="postal_code">Código Postal</label>
</div>
</div>
</div>
<div class="row justify-content-center">
<Eingabetyp="Schaltfläche" class="btn btn-dark" value="Buscar registros" @click="searchRegisters">
</div>
</div>
<div class="container mt-3 bg-whiteshadow abgerundet 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">Keine Zuweisungen</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="Einblenden des Tab-Bereichs" id="zugewiesen">
<div id="app4">
<asignedCalls></asignedCalls>
</div>
</div>
<div class="Tab-Bereich-Einblendung aktiv" id="nasigned">
<div id="app5">
<nAsignedCalls @registers="getCall"></nAsignedCalls>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { onMounted, defineComponent, toRef } from 'vue';
useNregister aus '../composables/ncalls' importieren
import asignedCalls from './roomBooss/asignedCalls';
nAsignedCalls aus './roomBooss/nasignedCalls' importieren;
Standard exportieren defineComponent({
Komponenten: {asignedCalls, nAsignedCalls},
Daten(){
zurückkehren{
Artikel: [],
Seitennummerierung: {
aktuelle_Seite: 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()
Funktion entfernen(id) {
deleteCalls(id)
}
Funktion searchId(action) {
let id = document.getElementsByClassName('id_search')[0].value
const params = [Aktion, ID];
queryForKeywords(params)
}
Funktion searchName(action) {
let id = document.getElementsByClassName('name_search')[0].value
const params = [Aktion, ID];
queryForKeywords(params)
}
Funktion searchPhone(action) {
let id = document.getElementsByClassName('phone_search')[0].value
const params = [Aktion, ID];
queryForKeywords(params)
}
Funktion bearbeiten(Aktion) {
window.location.href = '/roomboss/telemarketing/call/'+action+"/edit";
}
Funktion show(action) {
window.location.href = '/roomboss/telemarketing/call/'+action;
}
Funktion getPage(page){
getItems(page);
}
Funktion searchRegisters(){
var Adresse = "";
var city = "";
var cp = "";
Adresse = document.getElementById("Adresse").value
if( Adresse != "" ) {
param_search["parameter"] = "adresse";
param_search["value"] = Adresse;
}
city = document.getElementById("city").value
if( Stadt != "" ) {
param_search["parameter"] = "city";
param_search["value"] = Stadt;
}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')))
}
zurückkehren {
entfernen,
Such-ID,
Suchname,
SucheTelefon,
bearbeiten,
zeigen,
Ergebnisse bekommen,
getPage,
getCall,
Suchregister,
emitMyEvent
}
}
})
</script></pre>
<p><strong>Update</strong></p>
<p>Die von mir gesendeten Daten können im Netzwerk-Tab angezeigt werden, aber meine Tabelle ist leer</p>
<pre class="brush:php;toolbar:false;"><tbody>
<template v-for="Element der Register">
<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="bearbeiten" @click="edit(item.id)"><i class="fas fa-2x fa-edit"></i></button>
</div>
</div>
</div>
</td>
</tr>
</template>
</tbody></pre>
& lt; p & gt; Register</code></p> >
<pre class="brush:php;toolbar:false;"><script>
useNregister aus '../../composables/ncalls' importieren
import { onMounted, defineComponent } aus 'vue'
Standard exportieren defineComponent({
Name: 'nAsignedCalls',
gibt aus: ['registers'],
Daten(){
zurückkehren{
Artikel: [],
Seitennummerierung: {
aktuelle_Seite: 1,
},
newRegisters: Object.assign({}, this.registers),
}
},
setup(props, { emit }) {
const { getCall, deleteCalls, queryForKeywords, getResults, getItems } = useNregister()
Funktion entfernen(id) {
deleteDates(id)
}
Funktion searchId(action) {
let id = document.getElementsByClassName('id_search')[0].value
const params = [Aktion, ID];
queryForKeywords(params)
}
Funktion searchName(action) {
let id = document.getElementsByClassName('name_search')[0].value
const params = [Aktion, ID];
queryForKeywords(params)
}
Funktion searchPhone(action) {
let id = document.getElementsByClassName('phone_search')[0].value
const params = [Aktion, ID];
queryForKeywords(params)
}
Funktion bearbeiten(Aktion) {
window.location.href = '/roomboss/calls/'+action+"/edit";
}
Funktion getPage(page){
getItems(page);
}
// personalisierte Veranstaltung
const emitMyEvent = (event) => emit('registers', event);
zurückkehren {
entfernen,
Such-ID,
Suchname,
SucheTelefon,
bearbeiten,
Ergebnisse bekommen,
getPage,
emitMyEvent,
getCall
}
}
});
</script></pre></p>