How to pass props in Quasar 2 Vue 3 Composition API table?

Question

I'm trying to make a custom child component with props as a row data, but have the error "rows.slice is not a function", as I inspect the parent data is an Object, and the props received are the same Object but it's not visualized.

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

Answer 1

Based on your code, the details prop in the child component is an object. The q-table component expects the rows prop to be an array of objects, where each object represents a row.

To fix the error, you need to modify the way you’re passing data to the q-table.

Convert the details object into an array of objects:

const rows = [props.details]