Vue+Laravel发票编辑：新增商品时数据结构不匹配报错

一、前端统一（Vue端处理） #

1. 转换新增商品结构 #

从warehouse-products拿到扁平数据后，手动包装成和invoice_items一致的嵌套格式：

// 示例：把扁平商品数据转成嵌套结构
const flatProduct = await getWarehouseProducts(); // 假设这是接口返回的扁平数据
const formattedItem = {
  product: {
    id: flatProduct.id,
    name: flatProduct.name,
    sale_price: flatProduct.sale_price
    // 按需添加其他需要的product属性
  },
  quantity: 1 // 默认数量，根据业务调整
};
// 将formattedItem加入到发票商品列表
invoiceItems.value.push(formattedItem);

2. 模板兼容处理 #

如果不想改数据结构，直接在渲染时兼容两种结构，用可选链避免undefined报错：

<template>
  <table>
    <tr v-for="item in invoiceItems" :key="item.id">
      <td>{{ item.product?.name ?? item.name }}</td>
      <td>{{ item.product?.sale_price ?? item.sale_price }}</td>
      <!-- 其他列同理 -->
    </tr>
  </table>
</template>

低版本Vue（<2.6）不支持可选链，换成三元判断：item.product ? item.product.name : item.name

二、后端统一（Laravel端处理） #

1. 调整warehouse-products接口返回嵌套结构 #

在Laravel控制器里，把扁平商品数据包装成嵌套格式：

// WarehouseProductController.php
public function search(Request $request)
{
    $products = WarehouseProduct::where('name', 'like', "%{$request->input('q')}%")->get();
    
    return response()->json([
        'data' => $products->map(function ($product) {
            return [
                'product' => $product->only(['id', 'name', 'sale_price']),
                'quantity' => 1 // 按需添加默认字段
            ];
        })
    ]);
}

2. 调整invoice_items接口返回扁平结构 #

如果更偏好扁平结构，把嵌套的product属性展开到顶层：

// InvoiceItemController.php
public function getInvoiceItems($invoiceId)
{
    $items = InvoiceItem::with('product')->where('invoice_id', $invoiceId)->get();
    
    return response()->json([
        'data' => $items->map(function ($item) {
            return array_merge(
                $item->only(['id', 'quantity']), // 保留发票商品自身字段
                $item->product->only(['id', 'name', 'sale_price']) // 展开product属性
            );
        })
    ]);
}

内容的提问来源于stack exchange，提问作者abdelghani