VueJS 显示分组的对象数组

Question

我正在从 API 中获取国家/地区列表，并且我想按次区域（大陆）分组显示它们。像这样：

API 给我一个响应，它是一个对象（国家）数组，每个对象都有一个名为“子区域”的键 - 我想按该键进行分组。 我使用lodash进行分组，但也许有一个我不熟悉的Vue方法。 我的 JS 代码：

var app = new Vue({
  el: '#app',

  data: {
    countries: null,
  },

  created: function () {
    this.fetchData();
  },

  methods: {
    fetchData: function() {
      var xhr = new XMLHttpRequest();
      var self = this;
      xhr.open('GET', apiURL);
      xhr.onload = function() {
        var countryList = JSON.parse(xhr.responseText);
        self.countries = _.groupBy(countryList, "subregion");
      };
      xhr.send();
    },
  },
});

还有 HTML：

<li v-for="country in countries">
        {{ country.name }} (+{{ country.callingCodes[0] }})
</li>

我怎样才能实现图片中的内容？

Answer 1

您已使用带有以下代码的 lodash 按子区域对国家/地区进行了正确分组。

_.groupBy(countryList, "subregion")

这为您提供了一个对象，其键是子区域的名称，值是具有此类子区域的对象数组。

所以您的错误是您希望countries 中的值包含name。相反，它包含一个带有names 的对象数组。

为此，您需要两个 for 循环。

这是一个普通的实现。这里也是a bin。

fetch('https://restcountries.eu/rest/v2/all')
  .then(r => r.json())
  .then(data => {
    const grouped = _.groupBy(data, 'subregion')
    const listOfSubregions = Object.keys(grouped)

    listOfSubregions.forEach(key => {
      console.log(' =========== ' + key + ' =========== ')
      const countriesInThisSubregion = grouped[key]
      countriesInThisSubregion.forEach(country => {
        console.log(country.name + ' ' + country.callingCodes[0])
      })
    })
  })

使用 Vue，您将拥有类似以下的内容（未经测试，但根据上述代码应该非常容易推断）。

<li v-for="subregion in subregions">
  <ul>
    <li v-for="country of subregion">
        {{ country.name }} ({{ country.callingCodes[0] }})
    </li>
  </ul>
</li>