Vue.js 在组件渲染后会触发事件吗？

Question

我在 Vue.js 中有一些自定义组件。在我拥有的组件之一是一个选择列表，我想将其呈现为 选择 框。我将它与 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>

在我将数据添加到 Vue 实例中的 uploads 绑定数组后，视图会使用组件实例进行更新。不幸的是，当我尝试在选择字段上实例化 Chosen 时，它不起作用。

我不确定在将项目添加到 DOM 实际更新的 uploads 绑定数组后是否需要很短的时间。

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

组件完全渲染后是否会触发事件？

原文由 Wasim 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Jeff 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 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();
  }
})

编辑：在 Vue 2.* 中更改了指令语法：

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

原文由 Linus Borg 发布，翻译遵循 CC BY-SA 3.0 许可协议