vuejs3 - How to display object's property in child component by passing that object as a prop? - Stack Overflow

admin管理员组

文章数量:1315829

We use Vue 3 and the code looks as following:

Parent:

const template = ref<ShiftTemplate>({})
let dataToPass = ref<any>({})

<v-text-field-smart :data="dataToPass" />

dataToPass.value = {
    data: template.value,
    labelName: 'Name',
}

Child (v-text-field-smart):

<template>
    <v-text-field v-model="params.data">
        <template #label>{{ params.labelName }}<span class="text-red">*</span> </template>
    </v-text-field>
</template>

<script setup lang="ts">
const props = defineProps<{
    data: any
}>()

const params = toRef(props, 'data')
console.log('params =', params)
</script>

The screenshots:

If I write:

<template>
    <v-text-field v-model="params.data.name">
        <template #label>{{ params.labelName }}<span class="text-red">*</span> </template>
    </v-text-field>
</template>

I get an error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'name')
    at Proxy._sfc_render (VTextFieldSmart.vue:2:40)"

How to overcome this issue?

本文标签： vuejs3How to display object39s property in child component by passing that object as a propStack Overflow