问题描述
我正在从Laravel API检索数据并将其格式化为Quasar表。我主要使用它，但是q-td标签上的key属性有问题。对于简单的键值对，我可以使用键名称，但是在某些列中，我具有嵌套的数据或数组-例如，状态是具有名称和颜色的对象，并且用于填充qSelect组件。标签字段包含一个标签数组，我在v-for中使用它来显示一系列qBadges。
如果指定字段名称，则会收到错误消息“避免使用非原始值作为键，而使用字符串/数字值。” -因为该字段的值是对象或数组，而不是字符串或数字。我尝试使用ID或任何其他字段，但收到错误“检测到重复的密钥：'ID'。这可能会导致更新错误。'
<q-table
ref="table"
title="Invoices"
:data="invoices"
:columns="columns"
color="primary"
row-key="id"
:loading="loading"
no-data-label="no invoices within search prameters"
:visible-columns="visibleColumns"
:selected-rows-label="getSelectedString"
selection="multiple"
:selected.sync="selected">
<template v-slot:top="props">
<q-btn
flat round dense
:icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
@click="props.toggleFullscreen"
class="q-ml-md"
/>
<q-space />
<q-select
v-model="visibleColumns"
multiple
borderless
dense
options-dense
emit-value
map-options
:options="columns"
option-value="name"
style="min-width: 150px"
/>
</template>
<template v-slot:body="props">
<q-tr :props="props">
<q-td auto-width>
<q-checkBox dense v-model="props.selected" />
</q-td>
<q-td key="invoice_number" :props="props">
{{ props.row.invoice_number }}
</q-td>
<q-td key="id" :props="props">
{{ props.row.business.name }}
</q-td>
<q-td key="invoiced_at" :props="props">
<span v-if="props.row.invoiced_at">
{{ formatDate(props.row.invoiced_at,'MMM D,YYYY')}}
</span>
</q-td>
<q-td key="paid_at" :props="props">
<span v-if="props.row.paid_at">
{{ formatDate(props.row.paid_at,YYYY')}}
</span>
</q-td>
<q-td key="id" :props="props">
<q-select v-if="authuser && authuser.is_crew" rounded outlined fill-input :label-color="props.row.status.color" :color="props.row.status.color" v-model="props.row.status_id" :key="props.row.id" :options="statuses" label="Status" emit-value map-options option-label="name" @input="(val) => saveRow(props.row)">
<template v-slot:append>
<q-icon name="fas fa-circle" :color="props.row.status.color" />
</template>
</q-select>
<q-badge v-if="!authuser || !authuser.is_crew && props.row.status" :color="props.row.status.color">{{props.row.status.name}}</q-badge>
</q-td>
<q-td key="notes" :props="props">
<div class="table-description cursor-pointer">
<q-icon v-if="!props.row.notes" name="fas fa-comment-alt" class="float-right" />
{{ props.row.notes }}
<q-popup-edit
v-if="authuser.is_crew"
buttons
v-model="props.row.notes"
@save="(val,initialValue) => saveRow(props.row)"
>
<q-input
type="textarea"
v-model="props.row.notes"
autofocus
counter
@keyup.enter.stop
/>
</q-popup-edit>
</div>
</q-td>
<q-td key="id" :props="props">
<q-chip size="xs" v-for="(tag,idx) in props.row.tags" :key="idx" :label="tag" />
</q-td>
<q-td key="total" :props="props">
{{ props.row.total }}
</q-td>
<q-td key="id" :props="props">
<div class="text-grey-8 q-gutter-xs">
<q-btn size="12px" flat dense round icon="more_vert">
<q-menu>
<q-list style="min-width: 100px">
<q-item v-if="mode !== 'view'" clickable v-close-popup :to="'/invoice/'+props.row.id+'/view'">
<q-item-section avatar>
<q-icon color="primary" name="fas fa-eye" />
</q-item-section>
<q-item-section>view</q-item-section>
</q-item>
<q-item v-if="authuser.is_crew" clickable v-close-popup :to="'/invoice/'+props.row.id+'/edit'">
<q-item-section avatar>
<q-icon color="primary" name="fas fa-edit" />
</q-item-section>
<q-item-section>edit</q-item-section>
</q-item>
<q-item v-if="props.row.business" clickable v-close-popup :to="'/business/'+props.row.business.id">
<q-item-section avatar>
<q-icon color="primary" name="fas fa-user" />
</q-item-section>
<q-item-section>business</q-item-section>
</q-item>
<q-item v-if="authuser.is_crew" clickable v-close-popup @click.native="confirmDelete(props.row)">
<q-item-section avatar>
<q-icon color="negative" name="fas fa-trash" />
</q-item-section>
<q-item-section>delete</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</div>
</q-td>
</q-tr>
</template>
</q-table>
我的专栏：
columns: [
{ name: 'invoice_number',align: 'left',label: 'Inv Number',field: 'invoice_number',sortable: true },{ name: 'vendor',label: 'vendor',field: row => row.businessname,format: (val,row) => `${val}`,{ name: 'invoiced_at',label: 'Invoiced',field: 'invoiced_at',{ name: 'paid_at',label: 'Paid',field: 'paid_at',{ name: 'status',label: 'Status',field: row => row.status.name,format: val => `${val}`,{ name: 'notes',label: 'Notes',field: 'notes',sortable: false },{ name: 'tags',align: 'center',label: 'Tags',field: 'tags',{ name: 'total',align: 'right',label: 'Total',field: 'total',{ name: 'id',label: 'Actions',field: 'id',sortable: false }
]
数据是从Laravel资源返回的，这是一个示例： [{{id“：49，” total“：” 19279.36“，” invoice_number“：” 2546“，” name“：” Gillen Invoice 2020 2546“，” notes“：null，” status“：{” id“ ：20，“名称”：“打开”，“路径”：“打开发票”，“优先级”：2，“颜色”：“青色10”，“型号”：“应用程序\发票”，“描述” ：“已收到的未付发票”，“ created_at”：“ 2020-05-19T17：24：48.000000Z”，“ updated_at”：“ 2020-05-19T17：24：48.000000Z”，“ deleted_at”：null，“ vessel_id” “：null}，” status_id“：20，” business“：{” id“：21，” name“：” Gillen Diesel＆Marine Services“，” phone“：”（954）927-6500“，” address1“ ：“ 811 NE 3rd St”，“ address2”：null，“ city”：“ Dania Beach”，“ state”：“ FL”，“ zipcode”：“ 33004”，“ address_country”：null，“ email”：“ davegillensr@gillenyacht.com”，“类型”：{“ id”：30，“名称”：“维修”，“模型”：“ App \ Business”，“图标”：空，“颜色”：“灰色”， “ vessel_id”：null，“ equipment”：[]，“ created_at”：“ 2018-06-01T03：12：43.000000Z”，“ updated_at”：“ 2018-06-01T03：12：43.000000Z”}，“ type_id “：30，” url“：null
感谢您的帮助-很高兴看到堆栈上有更多类星体活动！
解决方法
您已多次使用id作为密钥。不要使用id键，请使用列名作为键。
<q-td key="vendor" :props="props">
{{ props.row.business.name }}
</q-td>
<q-td key="tags" :props="props">
<q-chip size="xs" v-for="(tag,idx) in props.row.tags" :key="idx" :label="tag" />
</q-td>
您可以使用tags和Vendor作为密钥。