无法读取未定义的属性‘长度’”
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