コンポーネントがレンダリングされた後、Vue.jsはイベントトリガーを行いますか？

Question

Vue.jsにカスタムコンポーネントがあります。私が持っているコンポーネントの1つに、Chosen選択ボックスとしてレンダリングする選択リストがあります。私はこれを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> 

IはVueのインスタンス内uploads結合したアレイ、コンポーネントのインスタンスを有するビューの更新にデータを追加した後。残念ながら、選択フィールドにChosenをインスタンス化しようとすると、それは機能しません。

uploadsバインドされた配列にDOMを実際に更新するアイテムを追加してから少し時間がかかりますかどうかわかりません。

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

コンポーネントが完全にレンダリングされた後にトリガーされるイベントはありますか？

Answer 1

あなたのコンポーネントで2つのことを試すことができます。どちらに基づいてパッケージで動作するかを判断できます。 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 
     } 
    } 
} 

Answer 2

正しい方法は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(); 
    } 
}) 

編集：ディレクティブの構文は、Vueの2 *に変更：

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

Answer 3

これを行う良い方法は、ChosenプラグインをVにラップすることです詳細にはhereに記載されているように、