Vue.js führt einen Ereignisauslöser aus, nachdem die Komponente gerendert wurde?

Question

Ich habe einige benutzerdefinierte Komponenten in Vue.js. In einer der Komponenten, die ich habe, ist eine Auswahlliste, die ich als Chosen Auswahlfeld rendern möchte. Ich benutze dies mit einer jQuery-Funktion $("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> 

Nachdem ich Daten an den uploads gebundenen Array in der Vue Instanz hinzufügen, die Ansicht aktualisiert mit einer Instanz der Komponente. Leider, wenn ich versuche, Chosen in das Auswahlfeld zu instanziieren, funktioniert es nicht.

Ich bin mir nicht sicher, ob es eine kurze Zeit dauert, nachdem ich ein Element zum uploads gebundenen Array hinzufüge, das das DOM tatsächlich aktualisiert.

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

Gibt es ein Ereignis, das ausgelöst wird, nachdem eine Komponente vollständig gerendert wurde?

Answer 1

Sie könnten zwei Dinge in Ihrer Komponente versuchen, basierend darauf, welche mit Ihrem Paket arbeitet. Im Vue Objekt:

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

Answer 2

Der richtige Weg wäre ein custom 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: Richtlinie Syntax geändert in Vue 2. *:

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

Answer 3

Ein guter guter Weg, dies zu tun wäre, das ausgewählte Plugin in ein V zu verpacken die Komponente, wie im Detail beschrieben here.