我正在从LaravelAPI中检索数据,并将其格式化为Quasar表。我让它大部分工作,但有一个问题的关键属性的q-td标签。对于简单的键-值对,我可以使用键名称,但在某些列中,我有嵌套数据或数组-例如,状态是一个具有名称和颜色的对象,我使用它填充qSelect组件。tags字段包含一个标签数组,我在v-for中使用它来显示一系列QBadge。
如果我指定字段名,我会得到错误“避免使用非基元值作为键,而是使用字符串/数字值。”-因为该字段的值是一个对象或数组,而不是字符串或数字。我尝试使用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, 'MMM D, 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', align: 'left', label: 'Vendor', field: row => row.businessname, format: (val, row) => `${val}`, sortable: true },
{ name: 'invoiced_at', align: 'left', label: 'Invoiced', field: 'invoiced_at', sortable: true },
{ name: 'paid_at', align: 'left', label: 'Paid', field: 'paid_at', sortable: true },
{ name: 'status', align: 'left', label: 'Status', field: row => row.status.name, format: val => `${val}`, sortable: true },
{ name: 'notes', align: 'left', label: 'Notes', field: 'notes', sortable: false },
{ name: 'tags', align: 'center', label: 'Tags', field: 'tags', sortable: true },
{ name: 'total', align: 'right', label: 'Total', field: 'total', sortable: true },
{ name: 'id', align: 'right', label: 'Actions', field: 'id', sortable: false }
]
数据从Laravel资源返回,以下是示例:[{id:49,总计:19279.36,invoice_number:2546,名称:Gillen发票2020夏季2546,注释:null,状态:{id:20,名称:打开,路径:打开发票,优先级":2、"颜色":"cyan-10"、"型号":"App\InVoice"、"描述":"已收到,未付款发票"、"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,“业务”:{“id”: 21,“名称”:“吉伦柴油
谢谢你的帮助-看到更多的类星体活动在堆栈上非常激动!
您已多次将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>
您可以使用标签
和供应商
作为键。
示例-https://codepen.io/Pratik__007/pen/PoNpyZV