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顯示分組對象數組

回答

相關問題