不使用 <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, ...}