vue.runtime.esm.js?TypeError: 無法讀取未定義的屬性

Question

我從 vuetify 文檔中創建了這個組件。

https://github.com/vuetifyjs/vuetify/blob/master/packages/docs/src/examples/v-card/prop-outlined.vue

<template>
    <v-card class="mx-auto" max-width="344" outlined>
        <v-list-item three-line>
            <v-list-item-content>
                <div class="text-overline mb-4">OVERLINE</div>
                <v-list-item-title class="text-h5 mb-1"> {{ person.name }} </v-list-item-title>
                <v-list-item-subtitle> {{ person.role }} </v-list-item-subtitle>
            </v-list-item-content>

            <v-list-item-avatar tile size="80" color="grey"></v-list-item-avatar>
        </v-list-item>

        <v-card-actions>
            <v-btn outlined rounded text> Message </v-btn>
        </v-card-actions>
    </v-card>
</template>

<script>
export default {
    name: 'Person',
    props: {
        person: Object
    }
}
</script>

我像這樣導入它們......打算循環使用它5次。

<template>
    <div class="teams">
        <h1 class="subtitle-1 grey--text">Teams</h1>
        <v-container class="my-5">
            <v-card class="mx-12 my-12">
                <v-row>
                    <v-flex xs12 sm6 md4 lg3 v-for="person in team" :key="person.name">
                        <Person :name="person" :role="person" />
                    </v-flex>
                </v-row>
                <v-divider></v-divider>
            </v-card>
        </v-container>
    </div>
</template>
<script>
import Person from '@/components/Person.vue'

export default {
    name: 'Team',
    components: {
        Person
    },
    data() {
        return {
            team: [
                { name: 'The Net Ninja', role: 'Web developer' },
                { name: 'Ryu', role: 'Graphic designer' },
                { name: 'Chun Li', role: 'Web developer' },
                { name: 'Gouken', role: 'Social media maverick' },
                { name: 'Yoshi', role: 'Sales guru' }
            ]
        }
    }
}
</script>

但是，它沒有編譯......我一直在

vue.runtime.esm.js?2b0e:1897 TypeError：無法讀取未定義的屬性（讀取“名稱”）

我忘了做什么？？

如果我注釋掉

 <Person :name="person" :role="person" />

結果

{{ person.name }}似乎可以訪問...

Answer 1

我認為這與 html 之后呈現的數據有關。 您可能可以通過以下方式解決此問題：

1. 在組件上添加 v-if； 僅在數據存在時才渲染組件。 您也可以將它添加到 v-flex 組件上，但據我所知，這是一種不好的做法，因為它可能會干擾流程。

<v-flex xs12 sm6 md4 lg3 v-if="person" v-for="person in team" :key="person.name">
       <Person />
</v-flex>

或者：

<Person v-if="person" />

2. 在 Person 組件 props 上添加默認值

    // Object with a default value
        person: {
          type: Object,
          default: function () {
            return { name: '' }
          }
        }

更多關於道具： https://v2.vuejs.org/v2/guide/components-props.html