In laravel i can show the product name, how to show it in vue.js

Question

This is the view route

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

This is output for 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"
  ]

This is the loop where I can show the product name

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

This is my json route

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

JSON Data:

{ "orders":{ "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" } }

Now I need to show PRODUCT NAME here

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

How to do it...?

Answer 1

It seems your product name is missing in JSON you provided. As far as I see, your product is related with entity "line_item". You need to "eager load" your product with your "line_item"

Change your json action to this:

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

And then in your vue template:

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

I am not sure that code will work as it is, but the main idea is to "eager load" order lines ("line_items") and products with your object of order, which you get by id in your json action. After that, you iterate through order lines in your vue template.

Answer 2

Yea, the problem is solved now.

This is my json data below

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() ]);
    }

And this is 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>