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数据：

{ “订单”：{ “ 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”， “数量”：“ 5”， “价格”：“ 2700”， “总价”：“ 13500” }， { “ customer_id”：“ 1”， “ product_id”：“ 43”， “ unit_id”：“ 1”， “数量”：“ 52”， “ price”：“ 7”， “总价”：“ 364” }， { “ customer_id”：“ 1”， “ product_id”：“ 9”， “ unit_id”：“ 2”， “ quantity”：“ 18”， “ price”：“ 3800”， “总价”：“ 68400” } ]， “总计”：82264， “折扣”：0， “小计”：82264， “已付费”：0， “到期”：82264， “ supplier_id”：0， “ customer_id”：1， “ others_fin”：“ {\” transport \“：\” 0 \“，\” type \“：\”收入\“}”， “ created_at”：“ 2019-01-16 19:13:27”， “ updated_at”：“ 2019-01-16 19:13:27” } }

现在我需要在此处显示PRODUCT NAME

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

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

2 个答案: