在 laravel 我可以显示产品名称，如何在 vue.js 中显示

Question

这是查看路线

 public function showOrder(Order $order)
    {      
        return view('return.sales-return-show', compact('order'));
    }

这是 dd($order); 的输出

  #original: array:18 [▼
    "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 ▶"
    "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.0
    "discount" => 0.0
    "sub_total" => 82264.0
    "paid" => 0.0
    "due" => 82264.0
    "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"
  ]

这是我可以显示产品名称的循环

@foreach($order->items as $item)
   {{$item->product->name}}
@endforeach

这是我的 json 路由

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

JSON 数据：

{ “命令”：{ “身份证”：7， “公司ID”：1， “订单类型”：1， "order_no":"12", "日期":"2019-01-16", “状态”：“1”， “transaction_raw”：[ { “金额”：“82264”， “交易类型”：3， “付款类型”：1， "owner_type":"App\Model\Customer", “所有者 ID”：“1” }, { “金额”：“0”， “交易类型”：4， “付款类型”：1， "owner_type":"App\Model\Customer", "owner_id":"1", “account_head_id”：1 } ], “line_items”：[ { "customer_id":"1", "product_id":"10", "unit_id":"2", “数量”：“5”， "价格":"2700", “总价格”：“13500” }, { "customer_id":"1", "product_id":"43", "unit_id":"1", “数量”：“52”， “价格”：“7”， “总价格”：“364” }, { "customer_id":"1", "product_id":"9", "unit_id":"2", “数量”：“18”， "价格":"3800", “总价格”：“68400” } ], “总计”：82264， “折扣”：0， “小计”：82264， “付费”：0， “到期”：82264， “供应商 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" } }

现在我需要在此处显示产品名称

<tr v-for="order in orders.line_items">
 <td></td>
 <td><input name="" v-model="PRODUCT NAME" class="form-control"></td>
 <td>{{order.product_id}}</td>
 <td></td>
 <td><input name="" v-model="order.quantity" class="form-control"></td>
 <td><input name="" v-model="order.price" class="form-control" disabled></td>
 <td><input name="" v-model="order.quantity * order.price" class="form-control" disabled></td>
 <td></td>
</tr>

怎么做...？

Answer 1

您提供的 JSON 中似乎缺少您的产品名称。据我所知，您的产品与实体“line_item”相关。你需要用你的“line_item”“急切地加载”你的产品

将您的 json 操作更改为：

public function json($id)
{
    $order = Order::with(['items', 'items.product'])
        ->where('id', $id)
        ->first();
    return response()->json(['order' => $order]);
}

然后在你的 vue 模板中：

<tr v-for="order_item in order.items">
 <td></td>
 <td><input name="" v-model="order_item.product.name" class="form-control" type="text"></td>
 <td>{{order_item.product_id}}</td>
 <td></td>
 <td><input name="" v-model="order_item.quantity" class="form-control" type="text"></td>
 <td><input name="" v-model="order_item.price" class="form-control" disabled type="text"></td>
 <td><input name="" v-model="order_item.quantity * order_item.price" class="form-control" disabled type="text"></td>
 <td></td>
</tr>

我不确定代码是否会按原样工作，但主要思想是使用您的订单对象“急切加载”订单行（“line_items”）和产品，您可以在 json 操作中通过 id 获得。之后，您将遍历 vue 模板中的订单行。

Answer 2

是的，问题现在解决了。

这是我下面的json数据

public function json(Order $order)
    {
        $products = $order->line_items;
        $productIds = array_column($products, 'product_id');
        $orderedProducts = Product::whereIn('id', $productIds)->get()->groupBy('id');
        return response()->json(['orders' => $order, 'orderedProducts' =>$orderedProducts->toArray() ]);
    }

这是 AdReturn.vue

<tr v-for="order in orders.line_items">
  <td><input name="" v-model="orderedProducts[order.product_id][0].name" class="form-control" disabled></td>
  <td><input name="" v-model="order.quantity" class="form-control"></td>
  <td><input name="" v-model="order.price" class="form-control" disabled></td>
  <td><input name="" v-model="order.quantity * order.price" class="form-control" disabled></td>
</tr>