我正在从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，“名称”：“吉伦柴油

谢谢你的帮助-看到更多的类星体活动在堆栈上非常激动！