[英]Unable to sort data in a `v-for` (data is not iterable) in vue.js
我有这个组件,我想为 COVID 病例生成国家数据,但数据按病例排序,而不是当前所在的国家。
我尝试对TotalConfirmed
数据进行排序,如下所示:
<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>
这是我正在使用的 API...
{
"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": {}
},
但是现在表格甚至没有显示。 不知道我哪里出错了。
您正在使用 null 值初始化data
数组,当您将它与扩展运算符const sorted = [...this.data];
一起使用时,该值是不可迭代的。 ,所以你必须用一个空数组初始化它:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.