我目前正在学习 Vue JS，我制作了一个简单的应用程序，它从 API 中提取信息，并根据给定的 2 个字母的国家/地区代码显示有关国家/地区的事实。从 API 检索的数据映射到 country 和 properties。它存储有关国家/地区的详细信息，例如时区、货币、人口等。但某些国家/地区缺少某些信息。我一直在尝试让用户界面在缺少其中一项信息时显示换行符。
这里，如果获取的数据为 null 或空数组，则 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;
在方法中，我有一个函数，如果 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, ...}