<p>J'essaie de le faire en envoyant des données de mon composant parent <code>formTelemarketing</code> à mon composant enfant <code>nAsignedCalls</code> ;code> Exécuter un accessoire dans props : { register: Number },</code> Lorsque je clique sur le bouton de soumission (pas sur le bouton de soumission), un formulaire doit être rempli, mon bouton d'action appelle la fonction <code>searchRegisters< /code> et récupérez la valeur du formulaire et utilisez $emit pour envoyer l'accessoire à mon composant</p>
<pre class="brush:php;toolbar:false;">this.$emit("registers", getCall(toRef(param_search,'param_search')))</pre>
<p>Dans le composant enfant contenu dans mon composant parent, j'ai : </p>
<pre class="brush:php;toolbar:false;"><div id="app5">
<nAsignedCalls @registers="getCall"></nAsignedCalls>
</div></pré>
<p>Dans mon composant enfant par défaut d'exportation, j'ai des accessoires :['register'] et dans ce composant de ma table, j'ai un for-each qui devrait obtenir toutes les données de cet accessoire...I Aucune erreur n'apparaît dans le console mais je n'arrive pas à afficher mes données</p>
<pre class="brush:php;toolbar:false;">{{ (registre) : "vacio" }}
<template v-for="élément de registre">
<tr>
<td>{{ item.id }}</td>
<td>{{ (nom.élément) ? nom.élément : '' }} </td></pre>
<p>Par exemple, c'est ma structure, j'ai une condition pour savoir si l'inscription est remplie, renvoie toujours "vacio".</p>
<p>Voici ma définition d'accessoires dans le composant enfant : </p>
<pre class="brush:php;toolbar:false;">exporter la définitionComponent par défaut({
nom : 'nAsignedCalls',
props :['registre'],</pre>
<p>Mon API fonctionne bien, dans l'onglet réseau de la console, je peux afficher la réponse ok <code>{"data":[{"id":895,"name":"Aguilera Muriel Fatimas",< ;/ code> j'ai plus de données...</p>
<p>Je ne sais pas ce que je fais de mal, je suis nouveau sur vue...</p>
<p>Merci pour votre avis et désolé pour mon mauvais anglais</p>
<p><strong>Mise à jour</strong></p>
<p>Tout d’abord, j’utilise l’API de composition dans mon projet. </p>
<p>Maintenant, dans mon composant enfant, je définis mon événement</p>
<pre class="brush:php;toolbar:false;">// événement personnalisé
const émetMonEvent = (événement) => émettre('registres', événement);
retour {
retirer,
ID de recherche,
nom de recherche,
rechercheTéléphone,
modifier,
Obtenir des résultats,
obtenirPage,
émettreMonÉvénement,
obtenir un appel
}</pré>
<p>Dans mon app.js, j'ai redéfini app5 : </p>
<pre class="brush:php;toolbar:false;">const app5 = createApp({
Composants:{
nAppelsAsignés
},
installation() {
const getCall = (event) => console.log('getCall(): ' + event.target.id);
retourner { getCall }
}
})
app5.mount('#app5')</pre>
<p>Mais lorsque je clique sur le bouton, je ne peux rien afficher sur le Web ou dans la console</p>
<p><strong>Mon bouton : </strong></p>
<pre class="brush:php;toolbar:false;"><input type="button" class="btn btn-dark" value="Rechercher les registres" @click="searchRegisters() ">≪/pré>
<p>Avec tout ce qui est scripté dans mon composant parent, je clique sur le bouton et j'appelle la fonction.</p>
<p>
<pre class="brush:php;toolbar:false;"><template>
<div class="conteneur mt-3 bg-ombre blanche arrondie p-3">
<div class="ligne justifier-content-start mt-4">
<div class="col-md-6 ml-3">
<div class="form-group">
<div class="ligne justifier-content-center">
<select class="form-control" name="téléopérateur" id="teleoperator_select" placeholder="Teleoperadora">
<option masquée>Teleoperadora</option>
</sélectionner>
</div>
</div>
</div>
</div>
<div class="row justifier-content-start align-items-center mt-4">
<div class="col-md-4">
<div class="form-item">
<type d'entrée="texte" nom = "adresse" id="adresse" requis>
<label for="adresse">Dirección</label>
</div>
</div>
<div class="col-md-4">
<div class="form-item">
<type d'entrée="texte" nom="ville" id="ville" requis>
<label for="city">Ciudad</label>
</div>
</div>
<div class="col-md-4">
<div class="form-item">
<type d'entrée="texte" nom="cp" id="code_postal" requis>
<label for="code_postal">Código Postal</label>
</div>
</div>
</div>
<div class="ligne justifier-content-center">
<type d'entrée="bouton" class = "btn btn-dark" value="Rechercher les registres" @click="searchRegisters">
</div>
</div>
<div class="conteneur mt-3 bg-ombre blanche arrondie p-3 ">
<div class="ligne justifier-content-center">
<div class="col-md-12">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link actif" data-toggle="onglet" href="#nasigned">Aucune attribution</a>
≪/li>
<li class="nav-item">
<a class="nav-link" data-toggle="onglet" href="#asigned">Asignadas</a>
≪/li>
</ul>
</div>
<div class="conteneur" style="largeur : 95% !important;">
<div class="tab-content">
<div class="fondu entrant dans le volet d'onglets" id="assigné">
<div id="app4">
<asignedCalls></asignedCalls>
</div>
</div>
<div class="fondu entrant dans le volet d'onglets actif" id="nasigned">
<div id="app5">
<nAsignedCalls @registers="getCall"></nAsignedCalls>
</div>
</div>
</div>
</div>
</div>
</div>
</modèle>
<script>
importer { onMounted, définirComponent, toRef } depuis 'vue' ;
importer useNregister depuis '../composables/ncalls'
importer des appels asignés depuis './roomBooss/asignedCalls' ;
importer nAsignedCalls depuis './roomBooss/nasignedCalls' ;
exporter le composant défini par défaut ({
composants : {asignedCalls, nAsignedCalls},
données(){
retourner{
articles: [],
pagination : {
page_actuelle : 1,
},
registre : 0,
}
},
accessoires : {registre : numéro},
setup(accessoires, {émettre}, contexte) {
const émetMyEvent = (événement) => émettre('registres', événement);
var param_search = {};
const { getCall, deleteCalls, queryForKeywords, getResults, getItems } = useNregister()
fonction supprimer (id) {
supprimerAppels(id)
}
fonction searchId (action) {
laissez id = document.getElementsByClassName('id_search')[0].value
const params = [action, identifiant];
requêteForKeywords (paramètres)
}
fonction rechercheNom(action) {
laissez id = document.getElementsByClassName('name_search')[0].value
const params = [action, identifiant];
requêteForKeywords (paramètres)
}
fonction rechercheTéléphone(action) {
laissez id = document.getElementsByClassName('phone_search')[0].value
const params = [action, identifiant];
requêteForKeywords (paramètres)
}
fonction modifier (action) {
window.location.href = '/roomboss/telemarketing/call/'+action+"/edit";
}
fonction show(action) {
window.location.href = '/roomboss/telemarketing/call/'+action;
}
fonction getPage(page){
getItems(page);
}
fonction searchRegisters(){
var adresse = "";
var ville = "";
var cp = "";
adresse = document.getElementById("adresse").value
if(adresse != "" ) {
param_search["paramètre"] = "adresse";
param_search["value"] = adresse ;
}
ville = document.getElementById("ville").value
if(ville != "" ) {
param_search["paramètre"] = "ville";
param_search["valeur"] = ville ;
}cp = document.getElementById("code_postal").value
si( cp != "" ) {
param_search["paramètre"] = "cp";
param_search["valeur"] = cp
}
context.emit("registres", getCall(toRef(param_search,'param_search')))
}
retour {
retirer,
ID de recherche,
nom de recherche,
rechercheTéléphone,
modifier,
montrer,
Obtenir des résultats,
obtenirPage,
getCall,
rechercher des registres,
émettreMonÉvénement
}
}
})
</script></pre>
<p><strong>Mise à jour</strong></p>
<p>Les données que j'ai envoyées peuvent être affichées dans l'onglet réseau, mais ma table est vide</p>
<pre class="brush:php;toolbar:false;"><tbody>
<template v-for="élément des registres">
<tr>
<td>{{ item.id }}</td>
<td>{{ (nom.élément) ? nom.élément : '' }} </td>
<td>{{ (adresse.élément) ? adresse.élément : ''}}</td>
<td>{{ (item.province) ? item.province : ''}} </td>
<td>{{ (item.ville) ? 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">
{{ (article) ? item.status.name : 'null' }}
</envergure>
</td>
<td>
<div class="hover-text">
<div class="icon-actions">
<div class="ligne justifier-content-center">
<div class="col-md-6 offset-md-1">
<i class="fas fa-cog"></i>
</div>
</div>
</div>
<div class="actions-conteneur">
<div class="col-md-3">
<button class="tooltip-text btn" id="modifier" @click="edit(item.id)"><i class="fas fa-2x fa-edit"></i></button>
</div>
</div>
</div>
</td>
≪/tr>
</modèle>
</tbody></pre>
我在组件<code>nAsignedCalls</code>使用<code> registres</code></p> >
<pre class="brush:php;toolbar:false;"><script>
importer useNregister depuis '../../composables/ncalls'
importer { onMounted, définirComponent } depuis 'vue'
exporter le composant défini par défaut ({
nom : 'nAsignedCalls',
émet : ['registre'],
données(){
retourner{
articles: [],
pagination : {
page_actuelle : 1,
},
newRegisters : Object.assign({}, this.registers),
}
},
setup(accessoires, {émettre}) {
const { getCall, deleteCalls, queryForKeywords, getResults, getItems } = useNregister()
fonction supprimer (id) {
supprimerDates(id)
}
fonction searchId (action) {
laissez id = document.getElementsByClassName('id_search')[0].value
const params = [action, identifiant];
requêteForKeywords (paramètres)
}
fonction rechercheNom(action) {
laissez id = document.getElementsByClassName('name_search')[0].value
const params = [action, identifiant];
requêteForKeywords (paramètres)
}
fonction rechercheTéléphone(action) {
laissez id = document.getElementsByClassName('phone_search')[0].value
const params = [action, identifiant];
requêteForKeywords (paramètres)
}
fonction modifier (action) {
window.location.href = '/roomboss/calls/'+action+"/edit";
}
fonction getPage(page){
getItems(page);
}
// événement personnalisé
const émetMyEvent = (événement) => émettre('registres', événement);
retour {
retirer,
ID de recherche,
nom de recherche,
rechercheTéléphone,
modifier,
Obtenir des résultats,
obtenirPage,
émettreMonÉvénement,
obtenir un appel
}
}
});
</script></pre></p>
