[Vuejs]-How to load the data when the page first load When I use vue js?

by

3👍

Check out the Vue api documentation. It’s full of useful information: from the basics to the nitty-gritty. It’s even searchable!

Specifically, familiarize yourself with the lifecycle of Vue, and how to hook into it.

You’re probably interested in either the ready or created lifecycle hook.

In particular, anything in the created hook will be run before the Vue element is is compiled. So you may want to place your logic there.

new Vue({
    el:"#app",
    data:{
        tasks:[
            {body:'go to  home',complete:true},
            {body:'watch tv',complete:true},
            {body:'go to bed',complete:true},
        ]
    },

    created: function() {
        /** Load task from database here **/
    }
});

0👍

To build on asemahle’s answer, you’d typically use a JSON endpoint on the server-side to deliver data for the vue.js data model. If you were using jQuery, for example, it’d look something like this:

new Vue({
    el: "#app",
    data: {
        tasks: []
    },

    created: function() {
        var that = this;
        $.getJSON('/task-list', function(response) {
            that.tasks = response;
        });
    }

});

Leave a comment