简体   繁体   中英

Unable to sort data in a `v-for` (data is not iterable) in vue.js

I have this component that I want to produce country data for COVID cases, but have the data sort by the cases and not the countries which it currently is.

I have tried to sort the TotalConfirmed data like below:

<template>
    <div class="container mx-auto mb-12 px-4">
        <table class="table-fixed rounded-lg shadow overflow-hidden">
            <thead class="bg-white">
                <tr>
                    <th class="w-1/3 px-4 py-2">Country Name</th>
                    <th class="w-1/3 px-4 py-2">Confirmed</th>
                    <th class="w-1/3 px-4 py-2">Deaths</th>
                    <th class="w-1/3 px-4 py-2">Recovered</th>
                    <th class="w-full px-4 py-2">Updated</th>
                </tr>
            </thead>
            <tbody class="bg-white">
                <tr v-for="(ci, i) in totalCases" :key="i">
                    <td class="border px-4 py-2">
                        {{ ci.Country }}
                    </td>
                    <td class="border px-4 py-2 text-center">
                        {{ ci.TotalConfirmed }}
                    </td>
                    <td class="border px-4 py-2 text-center">
                        {{ ci.TotalDeaths }}
                    </td>
                    <td class="border px-4 py-2 text-center">
                        {{ ci.TotalRecovered }}
                    </td>
                    <td class="border px-4 py-2 text-center">
                        {{ ci.Date | formatDate }}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    import axios from 'axios';

    export default {
        data() {
            return {
                data: null,
            };
        },
        computed: {
            totalCases: function() {
                const sorted = [...this.data];
                sorted.sort((a, b) => b.TotalConfirmed - a.TotalConfirmed);
                return sorted;
            },
        },
        mounted() {
            axios
                .get('https://api.covid19api.com/summary')
                .then((response) => (this.data = response.data.Countries));
        },
    };
</script>

This is the API I am using...

{
    "Global": {
        "NewConfirmed": 285196,
        "TotalConfirmed": 19096415,
        "NewDeaths": 6516,
        "TotalDeaths": 714924,
        "NewRecovered": 189126,
        "TotalRecovered": 11544750
    },
    "Countries": [
        {
            "Country": "Afghanistan",
            "CountryCode": "AF",
            "Slug": "afghanistan",
            "NewConfirmed": 67,
            "TotalConfirmed": 36896,
            "NewDeaths": 4,
            "TotalDeaths": 1298,
            "NewRecovered": 98,
            "TotalRecovered": 25840,
            "Date": "2020-08-07T19:49:47Z",
            "Premium": {}
        },

But now the table isn't even showing. Not sure where I am going wrong.

You're initializing the data array with null value which is non-iterable when you come to use it with spread operator const sorted = [...this.data]; , so you must initialize it with an empty array:

 data() {
    return {
      data: [],
    };
  },

 var app = new Vue({ el: '#app', data() { return { data: [], }; }, computed: { totalCases: function() { const sorted = [...this.data]; sorted.sort((a, b) => b.TotalConfirmed - a.TotalConfirmed); return sorted; }, }, mounted() { axios.get('https://api.covid19api.com/summary').then((response) => (this.data = response.data.Countries)); }, })
 <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" /> <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <div id="app"> <div class="container mx-auto mb-12 px-4"> <table class="table-fixed rounded-lg shadow overflow-hidden"> <thead class="bg-white"> <tr> <th class="w-1/3 px-4 py-2">Country Name</th> <th class="w-1/3 px-4 py-2">Confirmed</th> <th class="w-1/3 px-4 py-2">Deaths</th> <th class="w-1/3 px-4 py-2">Recovered</th> <th class="w-full px-4 py-2">Updated</th> </tr> </thead> <tbody class="bg-white"> <tr v-for="(ci, i) in totalCases":key="i"> <td class="border px-4 py-2"> {{ ci.Country }} </td> <td class="border px-4 py-2 text-center"> {{ ci.TotalConfirmed }} </td> <td class="border px-4 py-2 text-center"> {{ ci.TotalDeaths }} </td> <td class="border px-4 py-2 text-center"> {{ ci.TotalRecovered }} </td> <td class="border px-4 py-2 text-center"> {{ ci.Date | formatDate }} </td> </tr> </tbody> </table> </div> </div>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM