Kefungsian tanpa menggunakan <br> html untuk menambah pemisah baris

Question

Saya sedang belajar Vue JS dan saya membuat aplikasi mudah yang menarik maklumat daripada API dan memaparkan fakta tentang negara berdasarkan kod negara 2 huruf yang diberikan. Data yang diambil daripada API dipetakan kepada country 和 properties. Ia menyimpan maklumat terperinci tentang negara seperti zon waktu, mata wang, penduduk, dsb. Tetapi beberapa maklumat hilang untuk sesetengah negara. Saya telah cuba mendapatkan UI untuk memaparkan pemisah baris apabila salah satu daripada maklumat hilang.

Di sini, jika data yang diperoleh adalah nol atau tatasusunan kosong, country 和 properties item dalam kamus adalah rentetan kosong.

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;

Dalam kaedah saya mempunyai fungsi yang jika country 或 properties 的任何值等于空字符串，则返回
memaparkan watak baris baharu pada skrin.

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

Beginilah ia muncul dalam UI, yang bukan yang saya mahukan.

Ini app.vue saya. Kebimbangan utama saya ialah perkara di atas, saya juga sedang mencari maklum balas tentang cara menambah baik kod tersebut. Saya akan berterima kasih atas sebarang maklum balas. Terima kasih banyak-banyak.

Answer 1

Selepas anda mendapat data daripada API, adalah idea yang baik untuk memetakannya ke dalam struktur yang betul (objek JavaScript). Oleh itu, anda boleh mengawal pengosongan butiran (sifat) atau mengubah data untuk tujuan lain.

Contohnya:

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


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