VueJS显示分组对象数组

我从API中获取国家列表，我想按分区（大洲）按组显示它们。这样的：VueJS显示分组对象数组

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>

如何能够做到什么的图片？

来源

2017-08-27 Adam Marczyk

VueJS没有类似于数据分组的辅助方法：它不是用来做这件事的。它只是为MVVC数据绑定提供了一个框架。你能分享一个你得到的JSON响应的例子吗？ – Terry

我不确定这里的实际问题是什么。 –

@Terry当然，这是确切的回应https://restcountries.eu/rest/v2/all –

您已按照以下代码使用lodash按国家/地区对其国家/地区进行了正确分组。

_.groupBy(countryList, "subregion")

这给了你一个对象，其键是子区域的名称，值是具有这种子区域的对象的数组。

所以你的错误是，你期望在countries的值包含name。相反，它包含一个阵列与name s的对象。

为此需要两个for-loops。

这是一个香草实施。这里也是a bin。使用Vue，你可以得到类似于下面的内容（没有经过测试，但是根据上面的代码应该是非常容易推断出来的）。

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

来源

2017-08-27 16:52:54

想了一下，我得出了同样的结论。感谢帮助！ –

VueJS显示分组对象数组

回答

相关问题