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.