How can I pass pagination data and array from controller laravel to vue component?

My controller like this :

public function index()
{
    $products = $this->product->list(); 
    dd($products);
    return view('admin.product.index',compact('products'));
}

The result of dd($products); like this : https://postimg.org/image/w39usbfrv/

My view blade laravel like this :

<section class="content">
    <product-list :products="{{$products}}" test="test"></product-list>
</section>

My vue component product list like this :

<template>
    <div class="box">
        ...
    </div>
</template>
<script>
    export default {
        props: ['products','test'],
        mounted(){
            console.log(this.test)
            console.log(this.products)
        }
        ...
    }
</script>

If I run the code, on the console just display result ofconsole.log(this.test)

The result of console.log(this.products) is not display

Why it not display?

How can I solve this problem?

bobbybouwmann

8 years ago

Level 88

$products is not a single array of values here. I think you need to pass this to your component

<product-list :products={{ $products->toArray()['data'] }}></product-list>

$products->toArray()['data'] should give you only the items of the pagination object.

However your solution is not correct here. Why would you return a pagination object to a vue component. You either just give the correct array of products and fetch the next/previous page using ajax request or you pass all products at once and do the pagination inside the component.

moses

8 years ago

Level 2

@bobbybouwmann I know how to using the ajax request. But here I just want to try the another way. There exist error like this : "htmlspecialchars() expects parameter 1 to be string, array given (View: /home/vagrant/code/my-app/resources/views/admin/product/index.blade.php)"

Joucke

8 years ago

Level 27

It looks like your pagination data is a plain php array, try

<section class="content">
    <product-list :products="{{json_encode($products)}}" test="test"></product-list>
</section>

A plain php array doesn't know how to convert itself to a string.

1 like

Please or to participate in this conversation.