如何使用vue js将数组中的数组检索到表中

Posted 2023-02-22

【中文标题】如何使用vue js将数组中的数组检索到表中

【英文标题】：How to retrieve array inside an array into a table using vue js

【发布时间】：2021-04-14 22:52:40

【问题描述】：

我想在数组中检索一些数组但我不知道如何，请先阅读我的解释

这是我的 json 响应

"Value": [
    
        "id": "5ff97d740e788778dd66ee25",
        "id_order": "ORD-434183",
        "nama_pelanggan": "Herman",
        "total": 80000.0,
        "jumlah_item": 4.0,
        "cart": [
            
                "id_cart": "CART-112010",
                "nama_produk": "Ayam Bakar",
                "jumlah": 4.0,
                "harga": 20000.0,
                "subtotal": 80000.0,
                "notes": "ga ada"
            
        ],
        "admin_no": "ADM-431525",
        "admin_name": "Admin",
        "created_at": "2021-01-09 16:55:00",
        "updated_at": "2021-01-09 16:55:00"
    
],
"Status": true,
"Messages": [
    
        "Type": 200,
        "Title": "TotalRows",
        "Message": "1"
    
]

如您所见，“value”的值是一个数组，并且在该数组中还有一个数组“cart”

我想检索这个数组“购物车”并把它放在一个表中

这是我使用 vue js Mapping an Array to Elements with v-for 检索响应的方法

var vm = new Vue(
el: '#app',
data: 
    list: 
        items: [],
    ,


            var formData = new FormData();
            formData.append('filterparams', JSON.stringify(filters));
            formData.append('display', JSON.stringify(_self.list.config.display));
            formData.append('auth', sessionStorage.getItem("token"));

            _self.$http.post(hostapi + 'order/GetByParamsHistory', formData, 
                headers: 
                    'Content-Type': 'multipart/form-data'
                
            );
            var obj = response.data;
            _self.list.items = obj.Value; // the value from array "Value"

这是表格的html代码

现在不知道如何将数组中已有的数组插入到html表中

【参考方案1】：

可以根据数组索引访问数组。

假设，如果list 包含 json 响应的 value 字段，那么您可以访问它。 list['0'].cart.

【讨论】：

谢谢你，我可以检索数组，但是购物车数组的内容与内容不匹配，就像只取第一个数组一样，你能帮我解决这个问题吗？

我所有的数据订单现在在前端都有相同的购物车项目，我应该怎么做才能解决这个问题？？？

使用 v-for 我们还应该传递一个类似这样的键：<tr v-for="(row, index) in list['0'].cart" :key="index>。

什么是索引？

你知道如何在这段代码list['0'].cart中实现增量吗？