0
223
Vistas¿Qué enlace de ciclo de vida usar en Vue.js2 para llamar a la función en la carga de la página?
Tengo una tabla que potencialmente podría llenarse con cualquier cantidad de filas (por ejemplo, 3, 3800, etc.), así que antes de llenar los datos, quiero aplicar una superposición (ya tengo una función applyOverlay() para eso). Aquí está mi 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>Y aquí está mi JavaScript:
var tblItems = [ /* items */ ]; var app = new Vue({ el: '#table', data: { items: tblItems } }); Intenté usar $(document).ready de jQuery, pero veo que la página se carga (la tabla aún no se llena), y mi superposición no se aplica hasta segundos después (y la tabla se llena). Quiero que se aplique la superposición tan pronto como termine de cargarse el html. Leí sobre su ciclo de vida, pero no estoy seguro de qué enlace debo usar. Mi applyOverlay() es JavaScript estándar y no depende de Vue.
EDITAR: He intentado usar beforeMount mounted created y beforeCreate , y nada ha funcionado. Me pregunto si tiene algo que ver con jQuery. Pero, mi jQuery se carga primero antes de cargar Vue.
3 Respuestas
Responde la pregunta0
Puede usar el gancho de ciclo de vida creado y montado o el gancho beforeMount , como se muestra a continuación:
var app = new Vue({ el: '#table', data: { items: tblItems }, mounted () { // Your code needed to be executed on page load } });0
Creo que estás buscando "montado":
var tblItems = [ /* items */ ]; var app = new Vue({ el: '#table', data: { items: tblItems }, mounted: function() { //init table here because table template is available } }); 
0
La función applyOverlay() se puede agregar a la propiedad de métodos del objeto Vue. Luego use un gancho de ciclo de vida como beforeMount para llamar a ese método. Para una explicación más completa de los ganchos disponibles, Saurabh tiene una buena lista aquí .
var app = new Vue({ el: '#table', data: { items: tblItems }, methods: { applyOverlay: function() { //code for applying overlay } } beforeMount: function() { this.applyOverlay(); } });Vea esto demostrado a continuación. El ejemplo utiliza enlaces de clase HTML para agregar la superposición.
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>