Vue.js có kích hoạt sự kiện sau khi thành phần được hiển thị không?

Question

Tôi có một số thành phần tùy chỉnh trong Vue.js. Trong một trong các thành phần tôi có là một danh sách lựa chọn mà tôi muốn hiển thị như một hộp chọn Chosen. Tôi sử dụng chức năng này với hàm 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> 

Sau khi tôi thêm dữ liệu vào mảng uploads bị ràng buộc trong trường hợp Vue, chế độ xem cập nhật với phiên bản thành phần. Thật không may khi tôi cố gắng để nhanh chóng Chosen trên trường chọn, nó không hoạt động.

Tôi không chắc liệu có phải mất một thời gian ngắn sau khi tôi thêm một mục vào mảng bị ràng buộc uploads mà DOM thực sự cập nhật hay không.

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

Có sự kiện nào được kích hoạt sau khi một thành phần được hiển thị đầy đủ không?

Answer 1

Bạn có thể thử hai thứ trong thành phần của mình, dựa trên cái nào phù hợp với gói của bạn. Trong các đối tượng 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

Cách đúng sẽ là một 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(); 
    } 
}) 

chỉnh sửa: cú pháp chỉ thị thay đổi trong Vue 2. *:

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

Answer 3

Một cách hay để thực hiện việc này là kết nối plugin Chosen trong V thành phần ue, như được mô tả chi tiết here.