I am encountering an issue while attempting to create a custom child component with props as row data. The error message "rows.slice is not a function" keeps appearing, and upon inspecting the parent data, I found that it is an Object. However, the props received are also the same Object but they are not being displayed.
//Parent component
<script setup>
import DetailsFormComponent from '../components/DetailsFormComponent.vue'
import { ref } from 'vue'
const details = ref({
id: '1',
form_id_ts_in_db_ikar: '5',
bord_nr_fs: '522',
type_fs: 'plane',
form_id_ts_from_db_ikar: '5',
form_is_ts: '6',
form_name_ts_in_db_ikar: 'Name string',
development_lc: '10'
})
</script>
<template>
<form>
<DetailsFormComponent :details="details"/>
</form>
</template>
// Child component
<script setup>
import {ref} from 'vue'
const props = defineProps({
details: {
required: true,
type: Object
}
})
const columns = [
{ name: 'calories', align: 'left', label: 'Calories', field: 'calories', sortable: true },
{ name: 'calories', align: 'center', label: 'Calories', field: 'calories', sortable: true },
]
const rows = props.details
<template>
<div class="q-pa-md">
<q-table
title="Treats"
:rows="rows"
:columns="columns"
row-key="name"
/>
</div>
</template>