Vue.js 无法读取属性'；长度'；“未定义”的定义；

我得到下面的错误。奇怪的是，我肯定数据在那里，因为在我的vue加载项中，我可以看到它成功地从vuex商店获取了信息。我最初的猜测是，在创建模板时，数据还没有从存储中抓取

Vue warn]: Error in render: "TypeError: Cannot read property 'length' of undefined"

数据：从商店中抓取“空格”

    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>
      <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>

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

vue chrome加载项表示此信息位于组件中：

<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>

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

---

您应该使用

对象.键（空格）.length

，例如：

<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>

{{space.name}}

始终在检查长度之前，请确保您的属性已设置，然后检查长度

<v-flex v-if="spaces && spaces.length < filterMaxLength">

---

只是为了确保您的vue中有以下内容

import { mapState } from "vuex";

---

除此之外，您还可以使用getter，例如：

在您的vue文件中

v-if="this.getSpaces.length !== 0"

getSpaces() {

  return this.$store.getters.getSpaces;

}

getters: {
    getSpaces: state => {
      return state.spaces;
    }
},

在vue文件的计算函数中

v-if="this.getSpaces.length !== 0"

getSpaces() {

  return this.$store.getters.getSpaces;

}

getters: {
    getSpaces: state => {
      return state.spaces;
    }
},

在您的店铺中

v-if="this.getSpaces.length !== 0"

getSpaces() {

  return this.$store.getters.getSpaces;

}

getters: {
    getSpaces: state => {
      return state.spaces;
    }
},

---

显示您的店铺代码您的店铺是否从外部来源获得空间？可能您只是缺少了数据。我添加了存储，但就像我试图用vue插件显示的那样，它确实检测到组件页面上的数据。

spaces

在您的存储返回数据之前是未定义的，因此此时您无法读取其

长度。您只需要调整模板，使其能够在等待存储时处理未定义的数据
v-if=“spaces&&spaces.length
可能就足够了。@DanielBeck你好，谢谢你的回复，丹尼尔。。。。将代码从旧文件复制粘贴到我的新项目时。我忘了添加一些道具，比如
room.images
等等。因此这些道具没有定义！所以问题解决了！