Vue.js запускает событие после того, как компонент был отображен?

У меня есть некоторые пользовательские компоненты в Vue.js. В одном из компонентов у меня есть список выбора, который я хочу отобразить как 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>

После добавления данных в связанный массив uploads в экземпляре Vue представление обновляется экземпляром компонента. К сожалению, когда я пытаюсь создать экземпляр Chosen в поле select, это не сработает.

Я не уверен, что это займет короткое время после добавления элемента в массив 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>

Есть ли событие, которое запускается после полного отображения компонента?

Ответ 1

Вы можете попробовать две вещи в своем компоненте, на основе которых вы работаете с вашим пакетом. В объекте 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
        }
    }
}

Ответ 2

Правильным вариантом будет настраиваемая директива:

<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: синтаксис директивы изменен в Vue 2. *:

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

Ответ 3

Хорошим хорошим способом сделать это будет обернуть плагин Chosen в компоненте Vue, как описано подробно здесь.