[Vuejs]-Vue js data unable to loop

by

0👍

You need to save product details as json object.(in your case it’s json strting, not json objects).

Change your push function of controller like below:

$request->session()->push('product',json_decode($request->product));

Complete code:

public function StoreInCart(Request $request) {
    //dd($request->get('product'));

     #changes done on next line
     $request->session()->push('product',json_decode($request->product));

     return session('product');

}
public function listProduct(Request $request){
    $product = $request->session()->get('product');
    return $product;
}

0👍

The answer given by Samir Mammadhasanov might be a better option, but if you want to loop the Array like you mentioned, you could simply parse it like this:

    <div class="card-body" v-for="list in lists">
       {{JSON.parse(list).name}}
    </div>

0👍

You need to JSON.parse() the items in the list. As others have mentioned, these are JSON strings and not parsed objects yet.

You might want to consider creating a sub-component for each list item and then creating a computed property that returns the parse object like this:

parsedObject() {
    return JSON.parse(this.jsonString);
}

0👍

Not an answer to your question but after seeing your blade code I recommend you to use a key attribute with Vue js List Rendering.

<div v-for="product in products" :key="product.id">
      <div class="card" >
        <div class="card-header">{{product. name}}</div>
        <div class="col-md-4">
            <div class="card-body">
                    <img :src="product.image">
                    <p>{{product.price}}</p>
                    <p>{{product.category_id}}</p>
                </div>
                <button class="btn btn-primary" @click="addProductToCart(product)">Add to cart</button>
            </div>
        </div>        
    </div>

OR

 <div v-for="(product,index) in products" :key="index">
          <div class="card" >
            <div class="card-header">{{product. name}}</div>
            <div class="col-md-4">
                <div class="card-body">
                        <img :src="product.image">
                        <p>{{product.price}}</p>
                        <p>{{product.category_id}}</p>
                    </div>
                    <button class="btn btn-primary" @click="addProductToCart(product)">Add to cart</button>
                </div>
            </div>        
        </div>

From Vue Docs:

When iterating over an object, the order is based on the enumeration order of Object.keys(), which is not guaranteed to be consistent across JavaScript engine implementations.
https://v2.vuejs.org/v2/guide/list.html

Leave a comment