Vue.js déclenche-t-il un événement après que le composant a été rendu?

J'ai des composants personnalisés dans Vue.js. Dans l'un des composants, j'ai une liste de sélection que je veux faire en tant que boîte de sélection Choisis . J'utilise ceci 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 avoir ajouté des données au réseau lié aux uploads dans l'instance Vue, la vue se met à jour avec une instance du composant. Malheureusement, lorsque j'essaie d'instancier Chosen sur le champ select, cela ne fonctionne pas.

Je ne suis pas sûr de prendre un peu de temps après avoir ajouté un élément au réseau lié aux uploads que le DOM est actuellement mis à 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> 

Y a-t-il un événement déclenché après qu'un composant a été entièrement rendu?

Vous pouvez essayer deux choses dans votre composant, en fonction de laquelle vous travaillez avec votre paquet. Dans l'objet Vue:

 { 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 } } } 

La manière correcte serait une directive personnalisée :

 <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 directive modifiée dans Vue 2. *:

 Vue.directive("chosen",{ bind: function(el){ $(el).chosen(); } })