对象数组中的未定义值 Vue Js

Question

我试图用对象创建一个数组，但在循环时我得到的结果是前 83 个对象不安全，只有最后 4 个具有正确的数据。我试图重构代码几次，但我似乎没有找到解决方案。

This is the console log result i get

This is the network response i get from the API

<script>
export default {
    computed: {
        allSales(){
            var i, sales=[], x, y
            for (i = 0; i <= this.salesLists.length; i++) {
                sales[i] = {
                    x:this.date(i+1),
                    y:this.amount(i+1),
                    status:this.status(i+1),
                }
            }
            console.log(sales);// first 83 objects undefined
            return sales
        },
        salesLists() {
            this.$store.state.sale.sales
        },
    },
    methods:{
        date(id) {
            return this.salesLists.filter(sale => sale.id === id).map(sale => new Date(sale.updated_at).toISOString().slice(0,10))[0];
        },
        amount(id) {
            return this.salesLists.filter(sale => sale.id === id).map(sale => sale.amount)[0];
        },
        status(id) {
            return this.salesLists.filter(sale => sale.id === id).map(sale => sale.status)[0];
        }
    }
}

Answer 1

在查看您的第二个屏幕截图后，我发现您的 salesLists 具有 id 大于 87 或 salesLists 数组长度的元素。这是一个问题，因为在您的 for 循环中，您假设数组的每个元素都有一个 id 即 >= 1 和 <= salesLists.length.

因为情况并非如此，所以您的 date、amount 和 status 方法 return undefined 循环有多次迭代.

我建议您在对 map 的单个调用中直接在计算方法中转换 salesLists 数组。它可能看起来像这样：

allSales(){
  return salesLists.map(sale => {
    return {
      x: new Date(sale.updated_at).toISOString().slice(0,10),
      y: sale.amount,
      status: sale.status
    }
  })
},

对象数组中的未定义值 Vue Js

undefiend value in array of objects Vuejs

javascript

vue.js

apexcharts