javascript - 我在订单表中的 line_items 数组中有product_id，我想使用 vue.js 在 laravel 中根据此product_id 显示产品名称

Question

我在订单表中有一个名为 line_items 的单元格。 line_items 里面有这样的数据

  [
      {"customer_id":"30","product_id":"10","unit_id":"2","quantity":"1","price":"2700","total_price":"2700"},
      {"customer_id":"30","product_id":"43","unit_id":"1","quantity":"5","price":"7","total_price":"35"}
    ]

我有产品表，其中产品名称存储在名为 name 的单元格中。 products表的id就是上面数据中的product_id。

现在我有一条像这样的路线

 Route::get('json/{order}', 'ReturnController@json')->name('json');

这是ReturnController中的json函数

 public function json(Order $order)
    {
        return response()->json([ 'orders' => $order ]);
    }

这是 http://127.0.0.1:8000/json/7 中的 json 输出路线

{"order":{"id":7,"company_id":1,"order_type":1,"order_no":"12","date":"2019-01-16","status":"1","transaction_raw":[{"amount":"82264","transaction_type":3,"payment_type":1,"owner_type":"App\\Model\\Customer","owner_id":"1"},{"amount":"0","transaction_type":4,"payment_type":1,"owner_type":"App\\Model\\Customer","owner_id":"1","account_head_id":1}],"line_items":[{"customer_id":"1","product_id":"10","unit_id":"2","quantity":"5","price":"2700","total_price":"13500"},{"customer_id":"1","product_id":"43","unit_id":"1","quantity":"52","price":"7","total_price":"364"},{"customer_id":"1","product_id":"9","unit_id":"2","quantity":"18","price":"3800","total_price":"68400"}],"total":82264,"discount":0,"sub_total":82264,"paid":0,"due":82264,"supplier_id":0,"customer_id":1,"others_fin":"{\"transport\":\"0\",\"type\":\"income\"}","created_at":"2019-01-16 19:13:27","updated_at":"2019-01-16 19:13:27"}}

这是vue中的代码

 <tr v-for="order in orders.line_items">
     <td><input name="" v-model="order.product_id"></td>
     <td><input name="" v-model="PODUCT NAME"></td>
     <td><input name="" v-model="order.quantity"></td>
     <td><input name="" v-model="order.price" disabled></td>
     <td><input name="" v-model="order.quantity * order.price"></td>
 </tr>

我想显示产品表中的产品名称，其中写有“产品名称”。如何做到这一点。

我有产品模型和订单模型。

Answer 1

尝试立即加载关系:

return response()->json([ 'orders' => $order->load('product') ]);

之后(假设订单属于产品)，您可以在 Vue 中显示产品名称，如下所示:

{{ order.product.name }}