Hello, I have a question, is it possible to do so in order to first send a request to the server to accept it, and only then initialize all the data variables? Currently, currentTask and countTasks are initialized before the request to the server, an example below:

... data : { tasks : [], countTasks : tasks.length, currentTask : { title : tasks[0].title, description : tasks[0].description, inputData : tasks[0].inputData, outputData : tasks[0].outputData } }, created : function () { var self = this; axios.get('/getTasks').then(function (response) { var tasksFromServer = response.data; for (var i = 0; i < tasksFromServer.length; i++) { self.tasks.push({ title : tasksFromServer[i].title, description : tasksFromServer[i].description, inputData : tasksFromServer[i].inputData, outputData : tasksFromServer[i].outputData }); } }); }, ...

Can someone tell me what can be done or come up with to implement this idea? Thanks in advance ...

    1 answer 1

    The request to the server will go anyway much longer than the milliseconds that are required to create an instance.

    Before downloading, you can either put a stub, or just show the download icon:

     new Vue({ el: '#root', data: { data: [] }, beforeCreate: function () { new Promise((res, rej) => { setTimeout(_ => res(), 1000); }).then(res => { this.data = [ [1, 2, 3], [4, 5, 6], [7, 8, 9] ]; }); } }); 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script> <div id='root'> <table v-if='data.length'> <tr v-for='(row, i) in data' :key='i'> <td v-for='(cell, i) in row' :key='i'>{{ cell }}</td> </tr> </table> <div v-else>Loading...</div> </div>