Vue.js запрос к серверу перед инициализацией перменных

191

29 мая 2018, 09:20

Здравствуйте у меня вопрос, можно ли сделать так, чтобы сначала послать запрос на сервер принять его, и только потом инициализоровать все переменные data? На данный момент currentTask и countTasks инициализируются перед запросом к серверу, пример ниже:

...

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
            });
        }
    });
},
...

Может кто-нибудь подскажет что можно сделать или придумать, чтобы осуществить данныую идею? Заоранее спасибо...

Answer 1

Запрос на сервер будет идти в любом случае куда дольше, чем миллисекунды, которые требуются на создание экземпляра.

До загрузки можно либо поставить заглушки, либо просто показать значок загрузки:

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>