Vue.js ne un événement déclencheur après composante a été rendue?

J'ai quelques composants personnalisés dans Vue.js. Dans l'un des composants que j'ai est une liste de sélection qui je veux rendre un Choisi boîte de sélection. - Je l'utiliser avec une fonction jQuery $("select").chosen().

<template v-for="upload in uploads">
    <new-upload-container :index="$index" :upload="upload" v-if="isNewUpload"></new-upload-container>
    <existing-upload-container :index="$index" :upload="upload" v-if="isExistingUpload"></existing-upload-container>
</template>

Après je ajouter des données à la uploads lié tableau dans la Vue de l'instance, l'affichage est mis à jour avec une instance du composant. Malheureusement, lorsque j'essaie d'instancier Chosen sur le champ select, il ne fonctionne pas.

Je ne suis pas sûr si cela prend un peu de temps après j'ai ajouter un élément à la uploads lié tableau que le DOM en fait des mises à jour.

<template id="existing-upload-container">

      <select name="beats[@{{ index }}][existing_beat]" class="existing-beats">
           <option selected="selected" value="">-- Select a linked beat --</option>
                  @foreach ($beats as $beat)
                   <option value="{{$beat->id}}">{{$beat->name}}</option>
                  @endforeach
       </select>

    </template>

Est-il un événement qui est déclenché après un composant a été entièrement rendue?

InformationsquelleAutor Wasim | 2016-01-25
  1. 9

    Vous pouvez essayer deux choses dans votre composant, basé sur celui qui fonctionne avec votre colis. Dans la Vue de l'objet:

    {
    ready:function(){
        //code here executes once the component is rendered
        //use this in the child component
    },
    watch: {
        uploads:function(){
            //code here executes whenever the uploads array changes 
            //and runs AFTER the dom is updated, could use this in
            //the parent component
        }
    }
}
    • après l' +1 , il ressemble dans vuejs 2 ready est remplacé par updated , prendre un coup d'oeil ici: vuejs.org/v2/guide/instance.html j'ai testé ready il ne fonctionne pas
    • Je crois que la bonne serait mounted parce que mis à jour couvre plus que cela. Je ne pouvais pas le faire fonctionner avec ready mais mounted a fonctionné comme prévu.
    • ils sont différents. avec la montée vous ne pouvez pas résoudre le problème de la liaison de quelque chose de créé de façon dynamique les éléments de async données chargées. mise à jour fonctionne ici.
    InformationsquelleAutor Jeff
  2. 10

    La façon correcte serait un la coutume de la directive:

    <select v-chosen name="beats[@{{ index }}][existing_beat]" class="existing-beats">
    //insert/require() the following before the creation of your main Vue instance
Vue.directive("chosen",{
  bind: function(){
    $(this.el).chosen();
  }
})

    edit: syntaxe de la directive modifiée en Vue 2.*:

    Vue.directive("chosen",{
  bind: function(el){
    $(el).chosen();
  }
})
    • Cela sonne comme une solution plus élégante que la la accepté de répondre.
    • manquant . avant d'choisi()?
    • Merci, corrigé. Notez également que cette syntaxe fonctionne uniquement avec Vue 1.
    • ajout d'un code exemple pour Vue2
    InformationsquelleAutor Linus Borg
  3. 1

    utilisation mounted de rappel et de vérifier l'état des données dans votre code.

    • (Ce post n'a pas l'air de fournir un la qualité de la réponse pour la question. Veuillez modifier votre réponse et d'ajouter des détails supplémentaires, ou tout simplement de poster un commentaire à la question).
    InformationsquelleAutor uniEagle
  4. 0

    Une bonne façon de le faire est d'envelopper le Choisi plugin dans une Vue de composant, comme décrit en détail ici.

    InformationsquelleAutor yvoloshin