Currently, I am developing a shopping cart system using Laravel session and Vue.js. Below is a snippet of my Vue.js code where I loop through the products and add them to the cart/session on click.
<div v-for="product in products">
<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>
Below is a snippet of the Vue.js code:
export default {
data:function(){
return {
lists:[]// everything is pushed in lists array
}
methods:{
addProductToCart(product){
// alert(product)
axios.get('/cart',{
params: {
product: product
}
}).then((response) => {
});
mounted:{
axios.get('/list')
.then(function (resp) {
console.log(resp)
app.lists=resp.data
})}
This is how I have structured my controller:
public function StoreInCart(Request $request) {
//dd($request->get('product'));
$request->session()->push('product',$request->product);
return session('product');
}
public function listProduct(Request $request){
$product = $request->session()->get('product');
return $product;
}
When I store data in Vue.js, it looks like this:
lists:Array[7]
0:"{"id":1,"name":"Keyshawn McDermott Sr.","description":"Error aut quia id dolorem est aut doloribus nesciunt. Quod nihil tenetur ea id voluptas molestias id. Debitis amet dolor est fugiat sed autem.","category_id":1,"price":59,"image":"http://loremflickr.com/400/300?random=36","created_at":"2019-07-16 10:12:27","updated_at":"2019-07-16 10:12:27"}"
1:"{"id":2,"name":"Marlene Reichert","description":"Debitis asperiores sed sit assumenda unde quo natus. Consequatur est labore tenetur quae. Eius distinctio ea omnis aspernatur porro earum quae.","category_id":3,"price":76,"image":"http://loremflickr.com/400/300?random=71","created_at":"2019-07-16 10:12:27","updated_at":"2019-07-16 10:12:27"}"
2:"{"id":1,"name":"Keyshawn McDermott Sr.","description":"Error aut quia id dolorem est aut doloribus nesciunt. Quod nihil tenetur ea id voluptas molestias id. Debitis amet dolor est fugiat sed autem.","category_id":1,"price":59,"image":"http://loremflickr.com/400/300?random=36","created_at":"2019-07-16 10:12:27","updated_at":"2019-07-16 10:12:27"}"
3:"{"id":1,"name":"Keyshawn McDermott Sr.","description":"Error aut quia id dolorem est aut doloribus nesciunt. Quod nihil tenetur ea id voluptas molestias id. Debitis amet dolor est fugiat sed autem.","category_id":1,"price":59,"image":"http://loremflickr.com/400/300?random=36","created_at":"2019-07-16 10:12:27","updated_at":"2019-07-16 10:12:27"}"
4:"{"id":2,"name":"Marlene Reichert","description":"Debitis asperiores sed sit assumenda unde quo natus. Consequatur est labore tenetur quae. Eius distinctio ea omnis aspernatur porro earum quae.","category_id":3,"price":76,"image":"http://loremflickr.com/400/300?random=71","created_at":"2019-07-16 10:12:27","updated_at":"2019-07-16 10:12:27"}"
5:"{"id":18,"name":"Heidi Kuhlman","description":"Eveniet et dolorum aut magnam ut amet reprehenderit eveniet. Nihil incidunt voluptas aut amet et.","category_id":7,"price":274,"image":"http://loremflickr.com/400/300?random=2","created_at":"2019-07-16 10:12:27","updated_at":"2019-07-16 10:12:27"}"
Unfortunately, due to this data format, I am unable to loop through the lists successfully:
<div class="card-body" v-for="list in lists">
{{list.name}}// i got nothing
</div>
I am struggling to loop through the data stored in the Lists Array. Any suggestions on how to overcome this challenge would be greatly appreciated. Thank you.