Vue.js component render и axios

388

24 сентября 2017, 01:08

К примеру есть компонент

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

Answer 1

Т.к. это компонент лучше все данные передовать в нутри компонента в

props:{}

а не

data(){}

created(),mounted() и другие - будут вызывать все методы, которые завязаны на "цикле жизни" экземпляра -> компонента при его изменении, монитровании и т.д, и описанные в его "теле".

потому, лучше используйте

computed: {}

Пример:

Vue.component('News', {
data() {
    return {
        items: []
    }
},
computed: {
    getNews(){
        return axios.get('/news/items')
            .then((response) => {
                return response.data.News.items;
            })
            .catch(function(error) {
                return Promise.reject(error.status);
            });   
    }
},
render: function(createElement) {
    console.log('render');
}