Vue.js gives weird object with Observer data

Question

I'm receiving data with axios like this:

getData() {                                        
    Axios.get(                                        
        '/vue/get-data/',                           
        {                                             
            params: {                                 
                categories: this.category,            
                activeFilters: this.activeFilters,    
            }                                         
        }                                             
    ).then((response) => {                            
        this.banners = response.data;                 
        this.setBanner();                             
    })                                                
},           

Then I get this:

When I try console.log(response.data.length) I get undefined. What could be going on here very weird!

When I look in my vue-devtools banners has 2 objects:

So how can response.data.length be undefined?

Answer 1

You are getting object not array that why .length is not working, and you are getting as undefined

this.banners = response.data[0];// for first 

Or loop over this, to get each object's data

for(var i in response.data){
     console.log(response.data[i]);
}

If to get each value is not your purpose , and you want to just size check this answer