VueJS显示分组的对象数组

Question

我正在从API获取国家/地区列表，我希望按子区域（大陆）分组显示这些国家/地区。像那样：

API给我一个响应，它是一个对象数组（国家/地区），每个对象都有一个名为'subregion'的键 - 我想按该键分组。 我使用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。相反，它包含一个带有name s。

的数组对象

你需要两个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>