Changement de contenu dynamique problème


#1

Bonjour,

je découvre Vue.js et je rencontre un problème de gestion parents / enfants.

J’ai une page principale App.vue qui importe 4 autres fichiers :

  • 1 header
  • 1 menu sur le côté
  • 1 contenu
  • 1 footer
    Le contenu change lorsque nous cliquons sur un lien du menu sur la gauche ou d’un lien sur le header. Jusqu’ici pas de problème.
    Mais, lorsque dans mon contenu, j’ai un composant qui appel lui-même un autre composant (et donc le contenu doit changer), ça ne fonctionne pas. En faite ça fonctionne que sur 1 niveau, dès que j’ai un deuxième niveau de lien, rien ne se passe.

Petit résumé :
Lien menu gauche -> composant contenu dans App.vue qui se met à jour avec le composant appelé
Lien menu gauche -> composant contenu dans App.vue qui se met à jour avec le composant appelé -> Lien du composant appelé -> Pas de mise à jour du composant contenu.

Comment faut-il faire ?

Merci pour vos retours.

Cdt,


#2

Sans voir le code, on ne peut pas t’aider. Il y a mille et une façons différentes de faire.
Utilises-tu vue-router ?


#3

Salut, merci pour ton retour.

Voici le code d’un lien du menu à gauche :

Le code script de cette page :
// mixins
import Constantes from ‘./mixins/Constantes’

export default {
mixins: [Constantes],
name: ‘sidemenu’,
methods: {
changecontent(nameContent){
console.log(nameContent)
this.$emit(‘selectmenu’, nameContent)
}
}
}

Cela fonctionne bien, mon “Content.vue” charge bien le composant “listrapport”.
Par contre, à partir de “listrapport”, je souhaite ouvrir le composant “da-graphs” dans le “content.vue” et c’est là que ça ne fonctionne pas.

Lien dans "listrapports "(j’ai repris le même principe que pour le lien dans le menu gauche) :
image

Code script de “listrapports”:
export default {
name: ‘listrapports’,
methods: {
changecontent(nameContent){
console.log(nameContent)
this.$emit(‘selectmenu’, nameContent)
}
}
}

Comme vous l’avez remarqué, je débute… Si il y a d’autres façon de faire plus simple ou plus dans la norme, n’hésitez pas à me le dire.

Merci.


#4

Tu écoutes bien l’event selectmenu sur ton composant listrapports ?
(comme tu le fais pour ton composant sidemenu)

Oui, on le fait avec vue-router. ça permet de synchroniser l’URL aussi


#5

Salut,

oui j’ai repris la même mécanique dans listrapports que dans sidemenu mais ça ne fonctionne pas. Je ne comprends pas pourquoi…

Je vais faire un essai avec vue-router.

Merci pour tes retours.

@+


#6

Hello,

en relisant mon message, je me dits que je me suis mal exprimé.

Soit le fichier App.vue qui contient 4 composants (header, menu, content, footer).
Lorsque je clique sur un lien du menu, ça envoie le nom d’un composant à App.vu et ça met à jour le contenu avec le nom du composant qui a été passé en paramètre. Cette étape fonctionne.
Par contre, lorsque, dans le composant appelé, j’appel un autre composant, le content ne se met pas à jour.

Je galère sévère…


#7

J’aimerais bien voir à quoi ressemble ton App.vue

listrapports est chargé dans le “content” nan ?

ça ressemble à

<component :is="componentName" @selectmenu="changeContent">

?

edit : si il y a un composant intermédiaire (i.e. App.vue est le grand-père de listrapports), il faut que le composant intermédiaire écoute et ré-émette l’event.

edit 2: utilises des triples quote ``` autour du code (pour mettre en forme ton code)


#8

Salut,

App.vue est bien le grand père de ListRapports. ListRapports est le composant intermédiaire qui doit appelé un composant graphique.
Je suis parti en congés ce soir. Je ne pourrais pas poster les sources avant mon retour fin août.

Merci à toi.


#9

ahhh, ok, tu utilises du <component> dans App.vue et dans listrapports.
C’est le principe des nested routes sur vue-router