Как перебрать во VUE.JS c помощью v-for обьекты которые я получаю от сервера?

Question

[Vlad Avtomat]

Вначале я получаю свои обьекты

created() {
            this.$http.get('/api/main-page/transports/get-transports').then(response => {
                this.personalTransportTabs = response.body.personalTransportTabs;
                this.dataLoaded = true;
            }).catch(error => {
                console.log(error);
            });
        }

После чего как я понимаю нужно передать это в data

data() {
            return {
                personalTabs: this.personalTransportTabs
            };  
        },

После чего мы проходим c помощью v-for по нему.

<el-tab-pane v-for="personalTab in personalTabs" :label="personalTab.name" >{{ personalTab.name }}</el-tab-pane>

Что я делаю не так ?

Answer 1

[Алексей Шашенков]

this.$set

created() {
            this.$http.get('/api/main-page/transports/get-transports').then(response => {//Эта функция будет выполнена после инициализации
                this.$set(this,'personalTabs',  response.body.personalTransportTabs);
                this.dataLoaded = true;
            }).catch(error => {
                console.log(error);
            });
        },
data() {
            return {
                personalTabs: []
            };  
        },

Answer 2

[Evgeny Kulakov]

Поля в data реактивны, просто делайте присваивание когда получаете данные:

this.personalTabs = response.body.personalTransportTabs;

Это вызовет автоматический перерендеринг.

Вот это у вас не будет работать: personalTabs: this.personalTransportTabs. Т.к. инициализация data происходит один раз при создании экземпляра.