开发者问题收集

无法读取未定义的属性‘长度’”

2018-07-03
35369

我收到以下错误。奇怪的是,我确信数据在那里,因为在我的 vue 插件中我可以看到它成功地从 vuex 存储中获取了信息。我最初的猜测是,在创建模板时,数据尚未从商店中抓取?

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

数据: 'spaces' 是从商店中抓取的。

    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 插件说此信息在组件中:

在此处输入图片说明

3个回答

在检查长度之前,请务必确保您的属性已设置,然后检查长度

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

更新 ECMAScript 2020

您也可以使用 可选链接 来实现此目的

<v-flex v-if="spaces?.length < filterMaxLength">
Mohsen
2019-12-12

您应该使用 Object.keys(spaces).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>
Max S.
2018-08-30

只需确保您的 vue 中有以下内容

import { mapState } from "vuex";

否则,您也可以使用 getter,例如:

在您的 vue 文件中

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

在您的 vue 文件的计算函数中

getSpaces() {

  return this.$store.getters.getSpaces;

}

在您的 store 中

getters: {
    getSpaces: state => {
      return state.spaces;
    }
},
Teuk1
2021-02-25