К примеру есть компонент
Vue.component('News', {
props: {
data: {
type: Object,
default: function() {
return {
items: []
}
}
}
},
created() {
console.log('created');
return axios.get('/news/items')
.then((response) => {
console.log('data fetched');
this.data = response.data.News;
})
.catch(function(error) {
return Promise.reject(error.status);
});
},
render: function(createElement) {
console.log('render');
console.log(this.data.items);
}
});
Выполнив данный код получим:
created
render
undefined //console.log(this.data.items);
data fetched
render
(6) [{…}, {…}, {…}, {…}, {…}, {…}, __ob__: io] //console.log(this.data.items);
Рендер отработал дважды, первый раз не дожидаясь данные от ajax запроса. Так собственно как заставить отработать его только после получения этих самых данных ? Т.е. чтобы стало так:
created
data fetched
render