Vuejs不从底层API获取hasOne关系数据

Question

我正在为Invoices创建一个值组件，以在表中显示它们。从控制器，我发送了2个表("客户",invoice_products")，以便填充它们。我正在共享API(它清楚地返回它们)

{
"invoice": {
"id": 13,
"customer_id": "2",
"gross_total": 65,
"vat": 5,
"tax": 10,
"status": 1,
"created_at": "2022-05-30T03:46:54.000000Z",
"updated_at": "2022-05-30T03:46:54.000000Z",
"invoice_products": {
"id": 5,
"invoice_id": 13,
"product_id": 1,
"quantity": 22,
"total": 40,
"updated_at": "2022-05-30T03:46:54.000000Z",
"created_at": "2022-05-30T03:46:54.000000Z"
},
"customers": {
"id": 2,
"name": "Customer B",
"email": "[e-mail]",
"phone": "789456123",
"address": "Dhaka",
"created_at": null,
"updated_at": null
}
},

但是当我尝试像getInvoiceById.invoiceProducts.quantity一样获取它们时，它返回以下错误:

输入图片描述

表如下:

输入图片描述

输入图片描述

From the model:

public function invoiceProducts() {
return $this->hasOne('AppModelsInvoiceProduct', 'invoice_id');
}
public function customers() {
return $this->belongsTo('AppModelsCustomer', 'customer_id');
}

From Controller:

public function singleInvoice(Request $request, $id) {
$data['invoice'] = Invoice::with('invoiceProducts', 'customers')->where('id', $id)- 
>first();
return response()->json($data,200);
}

From template:

<td>{{ invoiceInfo.customers.name }}</td>

如果我这样写:{{invoiceInfo。Customers}}显示如下json:

{"id": 1，姓名": "客户";姓名": "邮箱";[e-mail]";电话"; ";123456789";地址";;Dhaka"; "created_at"; null; "updated_at"; null}

From script:

export default {
data() {
return {
allerrors : [],
invoiceInfo : [],
}
},
mounted() {
axios.get('/api/single-invoice/'+this.$route.params.id).then(response => {
this.invoiceInfo = response.data.invoice
})
}
}

Answer 1

在模板中使用invoiceInfo之前，我必须在CC_5中声明变量customers:

export default {
data() {
return {
allerrors : [],
invoiceInfo : {
customers : {}
}
}
},

谢谢大家的努力。