Funktionalität ohne Verwendung von <br> html zum Hinzufügen von Zeilenumbrüchen

Question

Ich lerne gerade Vue JS und habe eine einfache App erstellt, die Informationen von einer API abruft und Fakten über ein Land basierend auf einem bestimmten 2-Buchstaben-Ländercode anzeigt. Von der API abgerufene Daten werden country 和 properties zugeordnet. Es speichert detaillierte Informationen über ein Land wie Zeitzone, Währung, Bevölkerung usw. Für einige Länder fehlen jedoch einige Informationen. Ich habe versucht, die Benutzeroberfläche dazu zu bringen, einen Zeilenumbruch anzuzeigen, wenn eine der Informationen fehlt.

Wenn die erhaltenen Daten null oder ein leeres Array sind, sind die country 和 properties Elemente im Wörterbuch leere Zeichenfolgen.

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;

In der Methode habe ich eine Funktion, die bei country 或 properties 的任何值等于空字符串，则返回
ein Zeilenumbruchzeichen auf dem Bildschirm anzeigt.

convertToLineBreak(txt) {
  if (!txt) {
    return txt.replace(txt, "<br>");
  }
  return txt;
}

So wird es in der Benutzeroberfläche angezeigt, was ich nicht möchte.

Das ist meine app.vue. Mein Hauptanliegen ist das oben Genannte. Ich suche auch nach Feedback, wie ich den Code verbessern kann. Ich wäre für jedes Feedback dankbar. Vielen Dank.

Answer 1

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

例如：

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


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