Cannot read property 'length' of undefined" - vue.js

Question

I am getting the error below. The weird part is that I'm positive the data is there because in my vue add on I can see that it successfully grabs the information from the vuex store. My initial guess is that somehow the data is not yet grabbed from the store, at the point that it creates the template?
Vue warn]: Error in render: "TypeError: Cannot read property 'length' of undefined"
The data: 'spaces' is grabbed from the store.
export default {
name: "myspaces",
data() {
return {
filterMaxLength: 3,
selectedSpace: 0,
selectedRoom: 0
}
},
created() {
// Default selected space (first in json)
this.selectedSpace = this.spaces[0].id;
// Default selected room (first in json)
this.selectedRoom = this.spaces[0].rooms[0].id;
},
computed: {
// Get 'spaces' from store.
...mapState([
'spaces'
])
}
Template:
<template>
<div>
<v-flex v-if="spaces.length < filterMaxLength">
<v-btn v-for="space in spaces">
<h4> {{space.name}} </h4>
</v-btn>
</v-flex>
</div>
<template>
The store:
import Vuex from 'vuex'
Vue.use(Vuex);
export default new Vuex.Store({
state: {
spaces:[
{
id:1,
name:'House in Amsterdam',
rooms:[
{
id:1,
name:'Bedroom Otto',
},
{
id:2,
name:'Bedroom Mischa'
}
]
},
{
id:2,
name:'Office in Amsterdam',
rooms:[
{
id:1,
name:'Office 1',
},
{
id:2,
name:'Office 2'
}
]
}
]} });
The vue chrome add on says this information is in the component:

Answer 1

Always before check length, be sure your property its set then check length
<v-flex v-if="spaces && spaces.length < filterMaxLength">
Update ECMAScript 2020
You can use Optional chaining for this purpose too
<v-flex v-if="spaces?.length < filterMaxLength">

Answer 2

You should use Object.keys(spaces).length, such as:
<template>
<div>
<v-flex v-if="typeof spaces !== 'undefined' && typeof spaces === 'object' && Object.keys(spaces).length < filterMaxLength">
<v-btn v-for="space in spaces">
<h4> {{space.name}} </h4>
</v-btn>
</v-flex>
</div>
<template>

Answer 3

just to be sure you have following in your vue
import { mapState } from "vuex";
Else, you can use getters also, eg. :
In your vue file
v-if="this.getSpaces.length !== 0"
In computed fonctions of your vue file
getSpaces() {
return this.$store.getters.getSpaces;
}
In your store
getters: {
getSpaces: state => {
return state.spaces;
}
},

Answer 4

I also had this problem, I imported a sass style sheet with functions(#mixins) and a sass style sheet with variables into one sass style sheet.
I imported them as
(
#import url('./_variables.scss');
#import url('./_func.scss');
)
so i just took out the url() for both import statements and that error went away.