정의되지 않은 속성 'length'를 읽을 수 없습니다."

정의되지 않은 속성 'length'를 읽을 수 없습니다."

아래와 같은 에러가 발생하고 있습니다.이상한 점은 vue add-on에서 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 추가 기능에는 다음 정보가 구성 요소에 있다고 표시됩니다.

항상 길이 확인 전에 속성이 설정되어 있는지 확인한 후 길이를 확인하십시오.

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

ECMAScript 2020 업데이트

이 목적으로도 옵션 체인을 사용할 수 있습니다.

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

를 사용해 주세요.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>

만약을 위해 당신의 vue에 팔로워가 있는지 확인하려고요.

import { mapState } from "vuex";

---

또는 다음과 같이 getters를 사용할 수도 있습니다.

vue 파일에서

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

vue 파일의 계산된 함수

getSpaces() {

  return this.$store.getters.getSpaces;

}

매장내

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

언급URL : https://stackoverflow.com/questions/51154866/cannot-read-property-length-of-undefined