使用forEach设置南非为默认国家卡片信息失败的问题排查

一、forEach失效的核心原因 #

1. 数据加载时机不匹配：beforeMount钩子执行时，this.countries大概率还没从RestCountries API获取到数据（是空数组），导致forEach循环根本不会执行任何迭代，自然找不到南非的条目。
2. API字段名错误：新版RestCountries API中，两位国家代码的字段是cca2，而非旧版的alpha2Code，你的判断条件element['alpha2Code'] === 'ZA'永远无法匹配到数据。
3. 模板逻辑混乱：右侧section使用v-for遍历filteredCountries，会渲染多个卡片，且样式绑定语法错误（url(' + selectedFlagSrc + ')是无效的Vue插值语法），同时selected系列变量的绑定逻辑没有和选中的国家数据正确关联。

二、解决方案 #

1. 调整默认选择逻辑到数据加载完成后 #

把默认选择操作放在国家数据加载完成的回调里，确保this.countries有数据可遍历：

async mounted() {
  // 从API获取国家数据
  const res = await fetch('https://restcountries.com/v3.1/all');
  this.countries = await res.json();
  
  // 查找南非（ZA对应的cca2字段）
  const southAfrica = this.countries.find(country => country.cca2 === 'ZA');
  // 设置默认选中
  if (southAfrica) {
    this.selectCountry(southAfrica);
  } else {
    this.selectCountry(this.countries[0]);
  }
}

2. 修正selectCountry方法，确保变量正确更新 #

确保选中国家时，所有展示用的变量都能正确从选中对象中提取：

methods: {
  selectCountry(country) {
    this.selectedCountry = country;
    // 提取展示所需字段（处理空值兼容）
    this.selectedCapital = country.capital?.[0] || 'N/A';
    this.selectedLanguage = Object.values(country.languages || {})[0] || 'N/A';
    this.selectedCurrency = Object.values(country.currencies || {})[0]?.name || 'N/A';
    this.selectedTimezone = country.timezones?.[0] || 'N/A';
    this.selectedPopulation = new Intl.NumberFormat().format(country.population);
    this.selectedArea = country.area ? `${new Intl.NumberFormat().format(country.area)} km²` : 'N/A';
    this.selectedGini = Object.values(country.gini || {})[0] || 'N/A';
    this.selectedLatlng = country.latlng?.join(', ') || 'N/A';
    this.selectedLatlngUrl = country.latlng ? `https://www.google.com/maps?q=${country.latlng[0]},${country.latlng[1]}` : '';
  }
}

3. 修复HTML模板错误 #

移除右侧section的多余v-for（只需要展示选中的一个国家），修正样式绑定和数据绑定：

<main>
  <nav>
    <div id="app">
      <div class="country-search">
        <input type="text" placeholder="Search country..." autocomplete="off" v-model="search">
      </div>
      <div class="country-list" id="country-list">
        <div class="country" v-for="country in filteredCountries" :key="country.cca2" @click="selectCountry(country)">
          <img :src="country.flags.png" :alt="`Flag of ${country.name.common}`">
          {{ country.name.common }}
        </div>
      </div>
    </div>
  </nav>
  <!-- 只展示选中的国家，添加v-if避免空数据渲染 -->
  <section v-if="selectedCountry" :style="{ backgroundImage: `url(${selectedCountry.flags.png})` }">
    <div class="card-container">
      <div class="card">
        <div class="card-title">
          <img :src="selectedCountry.flags.png" :alt="`Flag of ${selectedCountry.name.common}`" />
          {{ selectedCountry.name.common }}
        </div>
        <div class="card-body">
          <div><strong>Code: </strong>{{ selectedCountry.cca2 }}</div>
          <div><strong>Capital: </strong>{{ selectedCapital }}</div>
          <div><strong>Region: </strong>{{ selectedCountry.subregion || 'N/A' }}</div>
          <div><strong>Language: </strong>{{ selectedLanguage }}</div>
          <div><strong>Currency: </strong>{{ selectedCurrency }}</div>
          <div><strong>Timezone: </strong>{{ selectedTimezone }}</div>
          <div><strong>Population: </strong>{{ selectedPopulation }}</div>
          <div><strong>Area: </strong>{{ selectedArea }}</div>
          <div><strong>World Bank Gini: </strong>{{ selectedGini }}</div>
          <div><strong>Lat Long: </strong>
            <a v-if="selectedLatlngUrl" :href="selectedLatlngUrl" target="_blank">{{ selectedLatlng }}</a>
            <span v-else>N/A</span>
          </div>
        </div>
      </div>
    </div>
  </section>
</main>

内容的提问来源于stack exchange，提问作者B C