无法在 vue.js 中的“v-for”（数据不可迭代）中对数据进行排序

Posted 2023-02-23

【中文标题】无法在 vue.js 中的“v-for”（数据不可迭代）中对数据进行排序

【英文标题】：Unable to sort data in a `v-for` (data is not iterable) in vue.js

【发布时间】：2020-11-28 06:01:52

【问题描述】：

我有这个组件，我想为 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": 
        ,

但现在表格甚至没有显示。不知道我哪里错了。

【问题讨论】：

您的控制台上可能有错误

【参考方案1】：

您正在使用空值初始化 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>