我正在使用laravel session和vue js来制作购物车系统。我的Vue JS代码部分如下。首先我循环了产品，然后使用click event将产品发送到端点，实际上是在购物车/会话中。 我的vue js代码部分如下。
var Product = require('../app/models/products');
var Purchase = require('../app/models/purchase');
var PurchaseItem = require('../app/models/purchaseItem');
var dates= new Date();
var set = {
supId : req.body.supId,
GrandTotalAmnt : req.body.GrandTotalAmnt,
SgstTotalAmnt: req.body.SgstTotalAmnt,
CgstTotalAmnt: req.body.CgstTotalAmnt,
IgstTotalAmnt: req.body.IgstTotalAmnt,
FinalTotalAmnt : req.body.FinalTotalAmnt,
TotalDecimalAmnt : req.body.TotalDecimalAmnt,
EditAmount : req.body.EditAmount,
invoiceNo : req.body.invoiceNo,
voucherNo : req.body.voucherNo,
SupDate : req.body.SupDate,
orderId : req.body.orderId,
purchaseStatus : "0",
datetime : strDate
};
var purchase = new Purchase(set);
purchase.save(set, function (err, doc) {
for(var n = 0; n < req.body.partId.length; n++){
var sets = {
purchaseId : doc._id,
partId : req.body.partId[n],
SellPrice : req.body.SellPrice[n],
TotalAmnt : req.body.TotalAmnt[n],
Tax : req.body.Tax[n],
Discount : req.body.Discount[n],
Quantity : req.body.Quantity[n],
Price : req.body.Price[n],
Per : req.body.Per[n],
DiscountAmnt : req.body.DiscountAmnt[n],
Sgst: req.body.Sgst[n],
Cgst: req.body.Cgst[n],
Igst: req.body.Igst[n],
TotalAmntData : req.body.TotalAmntData[n],
purchaseStatus : "0",
datetime : strDate
};
var purchaseItem = new PurchaseItem(sets);
purchaseItem.save(sets, function (err, docss) {
});
var deductqty = [];
var leftqty = [];
var stkkqty = [];
var quantityss = req.body.Quantity[n];
console.log("quantityss 1st time " + quantityss); // there is 2 quntity 2 & 3
Product.find({_id:req.body.partId[n]}, function (err, product) {
console.log("quantityss 2nd time " + quantityss+","+n); // 2nd time i got 3 & 3 not 2 & 3
for(var f = 0; f < product.length; f++){
stkkqty = product[f].stkQty;// product table quantity
console.log("quantityss 4 th time " + quantityss);
leftqty = parseInt(stkkqty) + parseInt(quantityss);
console.log("leftqty " + leftqty);
Product.update({ partId:product[f].partId }, { $set: { stkQty : leftqty}}, function (err, doc) {
console.log(doc);
});
}
});
console.log("quantityss 3rd time " + quantityss); //here i get right response 2 & 3
}
return res.redirect('purchase');
});
});
<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>
现在我的控制器是
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
})}
我也看到了以下列格式存储的数据
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;
}
由于上述格式，我无法循环数据
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"}"
在循环列表上，我什么也没得到。 请帮我。如何循环存储在列表数组中的数据。
答案 0 :(得分：0)
您需要将产品详细信息另存为json对象（在您的情况下为json strstr，而不是json对象）。
按如下所示更改控制器的推送功能：
$request->session()->push('product',json_decode($request->product));
完整代码：
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;
}
答案 1 :(得分：0)
Samir Mammadhasanov给出的答案可能是一个更好的选择，但是如果您想像您提到的那样循环数组，则可以像这样简单地解析它：
<div class="card-body" v-for="list in lists">
{{JSON.parse(list).name}}
</div>
答案 2 :(得分：0)
您需要JSON.parse（）列表中的项目。正如其他人提到的那样，这些是JSON字符串，尚未解析对象。
您可能要考虑为每个列表项创建一个子组件，然后创建一个计算属性，该属性返回如下所示的解析对象：
parsedObject() {
return JSON.parse(this.jsonString);
}
答案 3 :(得分：0)
不是您问题的答案，但是在看到刀片代码后，我建议您在Vue js列表渲染中使用key属性。
<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>
来自Vue文档：
在对象上进行迭代时，该顺序基于Object.keys（）的枚举顺序，这不能保证在JavaScript引擎实现中是一致的。 https://vuejs.org/v2/guide/list.html