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