vue.runtime.esm.js?TypeError: Cannot read properties of undefined

Question

I create this component from the vuetify documentation.

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>

I import them like so... was intended to use it in a loop 5 times.

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

However, it is not compiling... I kept getting

vue.runtime.esm.js?2b0e:1897 TypeError: Cannot read properties of undefined (reading 'name')

What did I forget to do ??

If I comment out the

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

Result

{{ person.name }} seems accessible...

You only have as props in Person props: {person: Object}, but your not passing person your passing name and role (which are not props) :name="person" :role="person", it should be <Person :person="person" /> — Lawrence Cherone
– Lawrence Cherone, Commented Dec 13, 2021 at 23:31

tony19 · Accepted Answer · 2022-07-15 05:03:26Z

1

I think it has something to do with the data being rendered after the html. You can probably solve this by:

Adding v-if on the component; only render the component if data exists. You can also add it on v-flex component but as far as I know it's a bad practice because it may disturb the flow.

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

or alternatively:

<Person v-if="person" />

Add a default value on Person component props

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

More about props: https://v2.vuejs.org/v2/guide/components-props.html

edited Jul 15, 2022 at 5:03

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 13, 2021 at 23:24

artikandri

1793 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

vue.runtime.esm.js?TypeError: Cannot read properties of undefined

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related