Clever Geek Handbook

What lifecycle binding should I use in Vue.js2 to call a function on page load?

I have a table that can potentially be populated with any number of rows (e.g. 3, 3800, etc.), so I want to apply an overlay before populating the data (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 $(document).ready

, but I can see that the page is loading (the table is not full yet) and my overlay is not applied until seconds (and this table is not full). I want the overlay to be applied immediately after the html is loaded. I've read about their lifecycle , but I'm not sure which hook I should be using. Mine applyOverlay()

is vanilla JavaScript and does not depend on Vue.

EDIT: I tried to use the mounted

, beforeMount

, created

, and beforeCreate

, and nothing worked. I wonder if it has anything to do with jQuery. But, before I load Vue, my jQuery is loaded.

+3


source to share


3 answers


You can use created , mounted lifecycle hook or beforeMount like below:



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


source


I think what you are looking for is "mounted":

var tblItems = [ /* items */ ];

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


enter image description here

0


source


The applyOverlay () function can be added to the method property of the Vue object. Use a lifecycle hook like beforeMount to call this method . For a more detailed 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 it shown below. The example uses HTML class bindings to add an 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>
Run codeHide result


0


source






More articles:


All Articles