我目前正在學(xué)習(xí) Vue JS，我製作了一個簡單的應(yīng)用程序，它從 API 中提取信息，並根據(jù)給定的 2 個字母的國家/地區(qū)代碼顯示有關(guān)國家/地區(qū)的事實。從 API 檢索的資料對應(yīng)到 country 和 properties。它儲存有關(guān)國家/地區(qū)的詳細信息，例如時區(qū)、貨幣、人口等。但某些國家缺少某些資訊。我一直在嘗試讓使用者介面在缺少其中一項資訊時顯示換行符。
這裡，如果取得的資料為 null 或空數(shù)組，則 country 和 properties 字典中的項目為空字串。
this.country.name = countryName == null ? "" : countryName;
this.country.capital = capital == null ? "" : capital;
this.country.currency = currency == null ? "" : currency;
this.country.phone = phone == null ? "" : phone;
this.country.emoji = emoji == null ? "" : emoji;
this.country.languages = languages.length == 0 ? "" : languages;
this.country.continent = continent == null ? "" : continent;
this.properties.demonym = demonym == null ? "" : demonym;
this.properties.area = area == null ? "" : area;
this.properties.timezones = timezones.length == 0 ? "" : timezones;
this.properties.population = population == null ? "" : population;
在方法中，我有一個函數(shù)，如果country 或properties 的任何值等於空字串，則傳回
convertToLineBreak(txt) {
if (!txt) {
return txt.replace(txt, "<br>");
}
return txt;
}
這就是它在 UI 中的顯示方式，這不是我想要的。
這是我的app.vue。我主要關(guān)心上面的問題，我也在尋找如何改進程式碼的回饋。如果有任何回饋，我將不勝感激。非常感謝。
1
0
0
從 API 取得資料後，最好將其對應(yīng)到正確的結(jié)構(gòu)（JavaScript 物件）。因此，您可以控制細節(jié)（屬性）的空白或?qū)①Y料轉(zhuǎn)換為其他目的。
例如：
"item": {
"firstItem": "currency",
"secondItem" : "timeZone"
...
}
const item = {currency: item.firstItem, timeZone: item.secondItem, ...}
