Javascript Vue.js 在组件渲染后会触发事件吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34997541/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vue.js does an event trigger after component has been rendered?
提问by Wasim
I've got some custom components in Vue.js. In one of the components I have is a select list that I want to render as a Chosenselect box. I use this with a jQuery function $("select").chosen().
我在 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>
After I add data to the uploadsbound array in the Vue instance, the view updates with an instance of the component. Unfortunately when I try to instantiate Chosenon the select field, it doesn't work.
在我将数据添加到uploadsVue 实例中的绑定数组后，视图更新为组件的一个实例。不幸的是，当我尝试Chosen在选择字段上实例化时，它不起作用。
I'm not sure if it takes a short time after I add an item to the uploadsbound array that the DOM actually updates.
我不确定将项目添加到uploadsDOM 实际更新的绑定数组后是否需要很短的时间。
<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>
Is there an event that is triggered after a component has been fully rendered?
是否有在组件完全渲染后触发的事件？
采纳答案by Jeff
You could try two things in your component, based on which one works with your package. In the Vue object:
您可以在您的组件中尝试两件事，根据哪一项适用于您的包。在 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
}
}
}
回答by Linus Borg
The correct way would be a 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: directive syntax changed in Vue 2.*:
编辑：指令语法在 Vue 2.* 中更改：
Vue.directive("chosen",{
bind: function(el){
$(el).chosen();
}
})
回答by uniEagle
use mountedcallback and check the data status in your code there.
使用mounted回调并检查代码中的数据状态。
