Comment déclencher une méthode à l'ouverture d'un composant dans vuejs?

Question

J'ai un composant principal qui est utilisé pour afficher les éléments en utilisant une boucle:

<v-list-tile v-for="(item, index) in items" :key="item.title"> 
    ... 
    <report type="item.type"> </report> 
</v-list> 

Le composant report est utilisé pour signaler un abus sur le système et le type de rapport peut varier en fonction de la item de la boucle mère.

Comme les utilisateurs sont très peu susceptibles d'utiliser report sur une base régulière, je voudrais seulement charger v-select éléments lorsque le dialogue (modal) est ouvert.

Utilisation created ou mounted déclenche le procédé de chargement à chaque fois que le composant report est généré et non lorsque le composant report est ouvert.

Y a-t-il un moyen intelligent d'empêcher cela et de n'avoir que la méthode de chargement report déclenchée uniquement lorsque le composant est ouvert.

=== === fichier Report.vue
=== Ce fichier est chargé dans le composant parent

<template lang="html"> 
     <v-dialog v-model="dialog" persistent max-width="800px" lazy> 
     <v-btn icon slot="activator"> 
      <v-icon>error_outline</v-icon> 
     </v-btn> 
     <v-card> 
      <v-card-title> 
      <div class="headline"><v-icon large>error_outline</v-icon> Reporting</div> 
      </v-card-title> 
      <v-card-text>You are about to report the following {{ reportType }}: "<i>{{ reportContent.title }}</i>" 
      <v-container v-if="this.$store.getters['report/getLoadedState']" grid-list-md > 
      <v-layout wrap> 
       <v-flex xs12 sm12> 
       <v-select 
        label="Select a reason" 
        required 
        cache-items 
        :items="items" 
        item-text="title" 
        item-value="id" 
       ></v-select> 
       </v-flex> 
       <v-flex xs12 sm12> 
       <v-text-field 
        label="Please provide additional information here" 
        multi-line></v-text-field> 
       </v-flex> 
      </v-layout> 
      </v-container> 
      <v-container v-else grid-list-md> 
      <v-layout> 
       <v-flex xs12 sm12> 
       Loading 
       </v-flex> 
      </v-layout> 
      </v-container> 
      </v-card-text> 
      <v-card-actions> 
      <v-spacer></v-spacer> 
      <v-btn color="green darken-1" flat="flat" @click.native="cancel">Cancel</v-btn> 
      <v-btn color="green darken-1" flat="flat" @click.native="report">Report</v-btn> 
      </v-card-actions> 
     </v-card> 
     </v-dialog> 
</template> 

<script> 
    export default { 
    name: 'report', 
    data() { 
     return { 
     dialog: false, 
     items: this.$store.getters['report/getItems'] 
     } 
    }, 
    props: ['reportType', 'reportContent'], 
    methods: { 
     cancel() { 
     this.dialog = false 
     }, 

     report() { 
     this.dialog = false 
     }, 

     loadReasons (type) { 
     if (!this.$store.getters['report/getLoadedState']) { 
      this.$store.dispatch('report/setItems', type) 
     } 
     } 
    } 
    } 
</script> 

<style lang="css" scoped> 
</style> 

PS 1: Je ne suis pas en utilisant JQuery et ne pas l'intention de l'utiliser
PS 2: appel de la méthode extérieur du composant report n'est pas une option que je veux maximiser réutilisabilité de ce compenent et seulement passer des arguments à l'aide props

Answer 1

Comment je l'ai fait dans le passé est d'utiliser un "composant dynamique". Vue utilise une syntaxe spéciale pour les composants dynamiques <component v-bind:is="currentView"></component>see: Vue dynamic components

Vous pouvez définir la propriété « currentView » à null puis sur un bouton cliquez sur un autre événement régler le currentView à report. En procédant ainsi, vous permettra d'utiliser la méthode montée en le composant n'est rendu ou créé que lorsqu'il est appelé dynamiquement.

<component :is="myComponent"></component> 
<v-btn @click="loadComponent">Show Report</v-btn> 

puis ...

data:{ 
     myComponent: null; 
}, 
methods: { 
     loadComponent: function(){ 
      this.myComponent = 'report'; 
     } 
} 

post-scriptum Vous pouvez bien sûr utiliser cette méthode pour rendre n'importe quel autre composant au même endroit. c'est-à-dire que vous pouvez définir 'currentView' sur le nom de n'importe quel composant disponible et il sera instantanément rendu à sa place.

Answer 2

je me suis retrouvé à l'aide d'une montre sur la gestion de la boîte de dialogue booléen ...

Answer 3

Faire une fonction qui charge le v-select. Ne l'initialisez pas, créez-le. Désormais, lorsque l'utilisateur clique sur le modèle de rapport, vous pouvez initialiser plusieurs fonctions à l'aide de v-on: click ou @click.

Par exemple:

<div v-on:click="return function() { fn1('foo');fn2('bar'); }()"> </div> 

Cette solution peut également être trouvée sur: Stackoverflow Link