I am facing an issue while passing props to a Child component table in my Quasar Vue3 app. The content is not being rendered, and I can't figure out why. Strangely, the console is clear of any errors. In the parent component, I am creating an object with keys and values, and then trying to pass it as a prop to the child component for rendering. Additionally, I have a button in the parent component that toggles a modal window.
// Child component
const props = defineProps({
airCraft: {
required: true
}
})
const rows = [props.airCraft]
<template>
<q-dialog >
<q-card>
<q-card-section>
<q-table
title="name"
:rows="rows"
:columns="columns"
row-key="name"
:hide-bottom="rows.length > 0"
flat bordered
>
<template v-slot:body="props">
<q-tr :props="props">
<q-td key="id" :props="props">
{{ props.row.id }}
</q-td>
<template>
<q-table>
<q-card-section>
<q-card>
<q-dialog >
<template>
// Parent component
<script>
let airCraft = {
id: '1',
name: 'name'
}
<script setup>
import {ref} from 'vue'
let fixed = ref(true)
<template>
<ModalAircraft v-model="fixed" :airCraft="airCraft" @click='fixed = true'/>
<template>