提问人：bob 提问时间：11/1/2023 更新时间：11/1/2023 访问量：50
如何在 Quasar 2 Vue 3 Composition API 表中传递道具？
How to pass props in Quasar 2 Vue 3 Composition API table?
问：
我正在尝试使用道具作为行数据制作一个自定义子组件，但出现错误“rows.slice 不是函数”，因为我检查父数据是一个对象，并且收到的道具是同一个对象，但它没有可视化。
//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>
答：
1赞
berkobienb
11/1/2023
#1
根据您的代码，子组件中的 details 属性是一个对象。q-table 组件期望 rows 属性是一个对象数组，其中每个对象代表一行。
要修复此错误，您需要修改将数据传递到 q-table 的方式。
将 details 对象转换为对象数组：
const rows = [props.details]
评论
0赞
Estus Flask
11/1/2023
需要根据经验法则进行计算，以涵盖所有情况
评论
rows<q-table :rows=[rows] />