Vue.js : Charger le composant uniquement si l'utilisateur clique sur le bouton

Question

J'ai un code qui ressemble au code ci-dessous. Comment puis-je le configurer pour que les composants 'dataPart1' et 'dataPart2' ne se chargent pas à moins que l'utilisateur ne clique sur un bouton pour afficher les données ? En d'autres termes, je ne veux pas que les données s'affichent automatiquement, mais seulement si l'utilisateur choisit de les voir en cliquant sur un bouton.

var app = new Vue({
  el: '#data',
  data: {
    show: true,
    something: true,
  },
  components: {
    dataPart1,
    dataPart2
  },
  ...other stuff...
  }
});

Answer 1

Afin d'afficher de manière conditionnelle le contenu des modèles (texte, html, composants, etc.), nous pouvons utiliser la méthode suivante Rendu conditionnel de Vue.js et plus particulièrement v-if directive.

Brève explication : nous pouvons afficher le contenu en fonction de certaines variables définies dans notre composant. Et changer la valeur de cette variable lors de certains événements, par exemple un clic sur un bouton.

Jetez un coup d'oeil à l'exemple sur CodeSandbox de charger deux composants conditionnellement aux clics des boutons.

En App.vue nous avons 2 boutons qui déclenchent un gestionnaire au clic et affichent le composant si la valeur correspondante est true .