在Vue.js2中使用哪个生命周期钩子在页面加载时调用函数？
在Vue.js2中使用哪个生命周期钩子在页面加载时调用函数？
提问于 2017-03-22 23:01:45
我有一个表，它可能会填充任意数量的行(例如，3,3800等)，因此在填充数据之前，我想应用一个覆盖(我已经有一个用于此的函数applyOverlay() )。这是我的HTML：
<table id="table" class="datatable" style="width:100%">
<thead>
/* table header */
</thead>
<tbody>
<tr v-for="(item, index) in items" item="item">
<td v-text="item.Name"></td>
/* more <td> */
</tr>
</tbody>
</table>下面是我的JavaScript：
var tblItems = [ /* items */ ];
var app = new Vue({
el: '#table',
data: {
items: tblItems
}
});我尝试使用jQuery的$(document).ready，但是我看到页面已经加载(表还没有填充)，我的覆盖直到几秒钟后才被应用(并且表已经填充)。我希望一旦html加载完成，就可以应用覆盖。我读到了他们的lifecycle，但我不确定我应该使用哪个钩子。我的applyOverlay()是普通的JavaScript，并不依赖于Vue。
编辑:我尝试过使用mounted、beforeMount、created和beforeCreate，但都不起作用。我想知道这是不是和jQuery有关。但是，我的jQuery确实是在加载Vue之前加载的。
回答 3
Stack Overflow用户
发布于 2017-03-22 23:18:39
您可以使用created、mounted生命周期挂钩或beforeMount挂钩，如下所示：
var app = new Vue({
el: '#table',
data: {
items: tblItems
},
mounted () {
// Your code needed to be executed on page load
}
});Stack Overflow用户
发布于 2017-03-22 23:19:58
我想你在找"mounted“：
var tblItems = [ /* items */ ];
var app = new Vue({
el: '#table',
data: {
items: tblItems
},
mounted: function() {
//init table here because table template is available
}
});
Stack Overflow用户
发布于 2017-03-23 00:03:15
可以将函数applyOverlay()添加到Vue对象的methods属性中。然后使用beforeMount这样的生命周期钩子来调用该方法。关于可用钩子的更全面的解释，Saurabh有一个很好的列表here。
var app = new Vue({
el: '#table',
data: {
items: tblItems
},
methods: {
applyOverlay: function() {
//code for applying overlay
}
}
beforeMount: function() {
this.applyOverlay();
}
});请看下面演示的内容。该示例使用HTML class bindings添加覆盖。
var tblItems = [ /* items */ ];
var app = new Vue({
el: '#table',
data: {
items: tblItems,
status: '',
overlay: false
},
beforeMount() {
this.applyOverlay();
setTimeout(this.setUnits, 1500);
},
methods: {
applyOverlay: function() {
this.overlay = true;
this.status = "overlay applied";
},
setUnits: function() {
this.overlay = false;
this.items = [{
Name: "A",
status: "done"
}, {
Name: "B",
status: "in transit"
}];
this.status = 'set items, overlay removed';
}
}
});.datatable {
text-align: center;
}
tfoot {
font-size: small;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
/*dim the background*/
background-color: rgba(0, 0, 0, 0.5);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js"></script>
<table id="table" class="datatable" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in items" item="item">
<td v-text="item.Name"></td>
<td v-text="item.status"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Status: {{ status }}
<div v-bind:class="{overlay: overlay}"></div>
</td>
</tr>
</tfoot>
</table>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42955412
复制相关文章
相似问题
腾讯云开发者
