Which lifecycle hook to use in Vue.js2 to call function on page load?

Question

I have a table that could potentially be populated with any number of rows (e.g. 3, 3800, etc.), so before the data is populated, I want to apply an overlay (I already have a function applyOverlay() for that). Here's my 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>

And here's my JavaScript:

var tblItems = [ /* items */ ];

var app = new Vue({ 
    el: '#table',
    data: {
        items: tblItems
    }
});

I tried using jQuery's $(document).ready, but I see that the page gets loaded (table not populated yet), and my overlay isn't applied until seconds later (and the table is populated). I want to have the overlay applied as soon as the html is done loading. I read about their lifecycle but I'm not sure which hook I should use. My applyOverlay() is vanilla JavaScript and doesn't depend on Vue.

EDIT: I've tried using mounted, beforeMount, created, and beforeCreate, and nothing has worked. I wonder if it has anything to do with jQuery. But, my jQuery does load first before loading Vue.

Answer 1

You can use created, mounted life-cycle hook or beforeMount hook, like following:

var app = new Vue({ 
    el: '#table',
    data: {
        items: tblItems
    },
    mounted () {
      // Your code needed to be executed on page load
    }
});

Answer 2

The function applyOverlay() can be added to the methods property of the Vue object. Then use a lifecycle hook like beforeMount to call that method. For a more thorough explanation of the available hooks, Saurabh has a good list here.

var app = new Vue({ 
    el: '#table',
    data: {
        items: tblItems
    },
    methods: {
        applyOverlay: function() {
             //code for applying overlay
        }
    }
    beforeMount: function() {
        this.applyOverlay();
    }
});

See this demonstrated below. The example uses HTML class bindings to add the overlay.

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>

Answer 3

I think you are looking for "mounted" :

var tblItems = [ /* items */ ];

var app = new Vue({ 
    el: '#table',
    data: {
        items: tblItems
    },
    mounted: function() {
        //init table here because table template is available
    }
});