不使用 <br> html 添加换行符的功能

Question

我目前正在学习 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。我主要关心上面的问题，我也在寻找有关如何改进代码的反馈。如果有任何反馈，我将不胜感激。非常感谢。

Answer 1

从 API 获取数据后，最好将其映射到正确的结构（JavaScript 对象）中。因此，您可以控制细节（属性）的空白或将数据转换为其他目的。

例如：

"item": {
 "firstItem": "currency",
 "secondItem" : "timeZone"
 ...
}


const item = {currency: item.firstItem, timeZone: item.secondItem, ...}