How to iterate in VUE.JS using v-for objects that I receive from the server?

Question

JavaScript

First I get my objects

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

After that, as I understand it, you need to transfer this to data

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

After that, we go through it with the help of v-for.

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

What am I doing wrong ?

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

The fields in data are reactive, just do an assignment when you get the data:
This will trigger an automatic re-render.
This will not work for you : Because data is initialized once when an instance is created. personalTabs: this.personalTransportTabs