Json 数组通过 Laravel Vue 但未按预期工作

Question

我正在使用 laravel vuejs 后端，在使用 json

传递值后

return response()-> json(
  array('product' => $product,
  product_materials' =>$product_materials)
);

对于 /product_details/1 我得到的产品：{}，product_materials：[{}] 这就是我想要的但是 /product_details/2 等它正在发送值 product:{}, product_materials:{"number":{}} 这里有什么问题？因此我无法进行动态计算。

/product_details/1

{
    "product": {
        "id": 1,
        "name": "Wooden Table",
        "description": "Dining",
        "quantity": 2,
        "material_items": 7,
        "material_cost": 87.6,
        "waste_percentage": 5,
        "waste_amount": 4.38,
        "labour_percentage": 15,
        "labour_amount": 13.796999999999999,
        "equipment_cost": "10.000",
        "other_percentage": 8,
        "other_amount": 9.26216,
        "margin_percentage": 10,
        "margin_amount": 12.503915999999998,
        "sub_total": 137.54307599999999,
        "amount": 275.08615199999997,
        "created_at": "2022-04-04T20:02:16.000000Z",
        "updated_at": "2022-04-09T13:04:44.000000Z",
        "created_by": 1,
        "updated_by": 1,
        "deleted_by": null,
        "deleted": 0
    },
    "product_materials": [
        {
            "id": 1,
            "product_id": 1,
            "description": "MDF Sheet",
            "quantity": 10,
            "rate": "5.000",
            "amount": "50.000",
            "delete": 0,
            "created_at": "2022-04-04T20:03:13.000000Z",
            "updated_at": "2022-04-04T20:03:13.000000Z",
            "created_by": 1,
            "updated_by": null,
            "deleted_by": null
        },
        {
            "id": 2,
            "product_id": 1,
            "description": "Filer",
            "quantity": 2,
            "rate": "10.000",
            "amount": "20.000",
            "delete": 0,
            "created_at": "2022-04-04T20:03:53.000000Z",
            "updated_at": "2022-04-04T20:03:53.000000Z",
            "created_by": 1,
            "updated_by": null,
            "deleted_by": null
        },
        {
            "id": 3,
            "product_id": 1,
            "description": "Primer",
            "quantity": 1,
            "rate": "4.000",
            "amount": "4.000",
            "delete": 0,
            "created_at": "2022-04-04T20:04:15.000000Z",
            "updated_at": "2022-04-04T20:04:15.000000Z",
            "created_by": 1,
            "updated_by": null,
            "deleted_by": null
        },
    ]
}

以及其他示例：/product_details/2

    "product": {
        "id": 2,
        "name": "Table",
        "description": "1.5m",
        "quantity": 1,
        "material_items": 1,
        "material_cost": 50,
        "waste_percentage": 2,
        "waste_amount": 1,
        "labour_percentage": 2,
        "labour_amount": 1.02,
        "equipment_cost": "20.000",
        "other_percentage": 2,
        "other_amount": 1.4404,
        "margin_percentage": 2,
        "margin_amount": 1.4692079999999998,
        "sub_total": 74.929608,
        "amount": 74.929608,
        "created_at": "2022-04-07T13:15:20.000000Z",
        "updated_at": "2022-04-09T13:21:54.000000Z",
        "created_by": 1,
        "updated_by": 1,
        "deleted_by": null,
        "deleted": 0
    },
    "product_materials": {
        "11": {
            "id": 12,
            "product_id": 2,
            "description": "Wood",
            "quantity": 10,
            "rate": "5.000",
            "amount": "50.000",
            "delete": 0,
            "created_at": "2022-04-09T10:27:21.000000Z",
            "updated_at": "2022-04-09T10:27:21.000000Z",
            "created_by": 1,
            "updated_by": null,
            "deleted_by": null
        }
    }
}

$product_materials = product_materials::all()->where('product_id', $product->id);

根据产品id获取产品材质

$product = product::find($id);

并在 Vue.js

data() {     return { product: {}, product_materials: [{}] };   },

Answer 1

这与 vuejs 无关，尝试 return product_materials 作为对象数组，即使对于一个对象也是如此

应该是这样的

"product_materials": [
    {
        "id": 12,
        "product_id": 2,
        "description": "Wood",
        "quantity": 10,
        "rate": "5.000",
        "amount": "50.000",
        "delete": 0,
        "created_at": "2022-04-09T10:27:21.000000Z",
        "updated_at": "2022-04-09T10:27:21.000000Z",
        "created_by": 1,
        "updated_by": null,
        "deleted_by": null
    }
]

Answer 2

在从数据库中获取所有 product_materials 后，您正在使用 where() 过滤集合。

改成这个就可以解决你的问题了。也就是在从数据库获取结果之前应用条件（性能也更好）

$product_materials = product_materials::where('product_id', $product->id)->get();

Answer 3

使用：

$product_materials = product_materials::query()
    ->where('product_id', $product->id)
    ->get();

或：

$product_materials = product_materials::query()
    ->where('product_id', $product->id)
    ->first()();

Json 数组通过 Laravel Vue 但未按预期工作

Json array passing through Larvel Vue but not working as intended

laravel

vue.js