vue js数据无法循环

Question

我正在使用 laravel session 和 vue js 制作购物车系统。我的vue js代码部分如下。首先我循环了产品，然后使用点击事件，我将产品发送到端点，实际上是在购物车/会话中。 我的部分vue js代码如下。

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

在 vue 中我也看到以以下格式存储的数据

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

由于上述格式，我无法循环数据

<div class="card-body" v-for="list in lists">
   {{list.name}}// i got nothing
</div>

在循环列表中我什么都没有。 请帮我。如何循环存储在 Lists Array 中的数据。

Answer 1

不是您的问题的答案，但在看到您的刀片代码后，我建议您使用 Vue js 列表渲染的关键属性。

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

或

 <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

Answer 2

您需要 JSON.parse() 列表中的项目。正如其他人所提到的，这些是 JSON 字符串，尚未解析对象。

您可能需要考虑为每个列表项创建一个子组件，然后创建一个返回解析对象的计算属性，如下所示：

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

Answer 3

Samir Mammadhasanov 给出的答案可能是一个更好的选择，但是如果你想像你提到的那样循环数组，你可以简单地像这样解析它：

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

Answer 4

您需要将产品详细信息保存为 json 对象。（在您的情况下，它是 json strting，而不是 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;
}