我在订单表的line_items数组中有product_id,我想使用vue.js在laravel中针对该product_id显示产品名称

时间:2019-01-28 13:00:46

标签: javascript mysql json laravel vue.js

我在订单表中有一个名为line_items的单元格。在line_items内部,有类似

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

我有产品表,其中产品名称存储在名为名称的单元格中。产品表的ID是上述数据中的product_id。

现在我有一条类似的路线

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

这是ReturnController中的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"}}

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

 <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>

这是Vue中的代码

{{1}}

我想显示产品表中写有“产品名称”的产品名称。怎么做。

我同时拥有产品和订单模型。

1 个答案:

答案 0 :(得分:0)

尝试渴望加载关系:

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

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

{{ order.product.name }}