The child component reported an error when a parent-child parameter was passed in the request Cannot read properties of undefined

[Silence-dream]

在请求中使用父子传参,子组件报错 The child component reported an error when a parent-child parameter was passed in the request

demo

[chenxch]

playground

// bad
{{props.users[0].name}}

// 在template 无需要在写props了，然后在使用数组下标的时候要判断下标是否存在哦
{{users?.[0].name}}

[Silence-dream]

ty

[liulinboyi]

First of all the error is define the ref like this:

const data = ref();

the data's value is undefined, so when render the component will throw error.

I think you should use v-if, let the component don't render before get the data.

<Comp v-if="users" :users='users'/>

playground demo

or

processing the props with x ? x : '' or x?.namesyntax:

{{props.users ? props.users[0].name : ''}}

or

{{users?.[0].name}}

playground demo

or

use computed

const name = computed(() => {
	return props.users ? props.users[0].name : ''
})

playground demo