Fonctionnalité sans utiliser <br> html pour ajouter des sauts de ligne

Question

J'apprends actuellement Vue JS et j'ai créé une application simple qui extrait des informations d'une API et affiche des faits sur un pays en fonction d'un code de pays à 2 lettres donné. Les données récupérées de l'API sont mappées sur country 和 properties. Il stocke des informations détaillées sur un pays telles que le fuseau horaire, la devise, la population, etc. Mais certaines informations manquent pour certains pays. J'ai essayé de faire en sorte que l'interface utilisateur affiche un saut de ligne lorsqu'une des informations est manquante.

Ici, si les données obtenues sont nulles ou un tableau vide, les country 和 properties éléments du dictionnaire sont des chaînes vides.

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;

Dans la méthode, j'ai une fonction qui si country 或 properties 的任何值等于空字符串，则返回
affiche un caractère de nouvelle ligne à l'écran.

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

C'est ainsi que cela apparaît dans l'interface utilisateur, ce qui n'est pas ce que je souhaite.

Voici mon app.vue. Ma principale préoccupation est ce qui précède, je recherche également des commentaires sur la façon d'améliorer le code. Je serais reconnaissant pour tout commentaire. Merci beaucoup.

Answer 1

Après avoir obtenu les données de l'API, c'est une bonne idée de les mapper dans la structure correcte (objet JavaScript). Par conséquent, vous pouvez contrôler la suppression des détails (propriétés) ou transformer les données à d'autres fins.

Par exemple :

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


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