在卡片容器中显示世界国家/地区下拉选择的国家/地区 API 信息（首都、货币等）

Question

我试图将南非的卡信息显示为默认值（在搜索栏输入字段中输入任何国家/地区名称或从给定列表中选择特定国家/地区之前）以及卡容器中的相应国家/地区信息详细信息！在这种情况下，我使用restcountries api 及其国家/地区 json 信息！ 为什么它不能与“forEach”一起使用，也许您可能有任何想法或建议如何解决它？

    beforeMount() {
        var self = this;
        var found = false;
        this.countries.forEach(function(element) {
          if(element['alpha2Code'] === 'ZA') {
            self.selectCountry(element);
            //self.push(element);
            found = true;
          }
        });      

        if(!found)
            this.selectCountry(this.countries[0]);
    
      },



html:
<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, index) in countries"  method="GET" @click="selectCountry(country)">
        <img :src="getFlagSrc(country)">
        {{ getName(country).common }}
      </div>

    </div>
  </nav>

  <section :style="{ 'background-image': url(' + selectedFlagSrc + ')' }" v-for="(country, index) in filteredCountries" @click="selectCountry(index)">

    <div class="card-container">
      <div class="card">

        <div class="card-title">
          <img :src="selectedFlagSrc.flags.png" alt="" />
        {{ selectedName.common }}
        </div>

        <div class="card-body">
          <div><strong>Code: </strong>{{ selectedCode }}</div>
          <div><strong>Capital: </strong>{{ selectedCapital }}</div>
          <div><strong>Region: </strong>{{ selectedSubregion }}</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 :href="selectedLatlngUrl" target="_blank">{{ selectedLatlng }}</a></div>
</div>

      </div>
    </div>

  </section>

</main>

我希望用默认值解决问题！在做出任何选择之前，右侧的卡片容器周围应该默认看到南非国旗（分别在之后 - 在输入中输入所选国家或国家的给定国旗）下图左侧的字段）！不幸的是，到目前为止，有关所选国家的信息尚未正确传输到右侧的卡容器中;(！

Answer 1

我已设法修复您的代码

您的代码中存在很多问题，而且还有更多。你真的应该检查一下

HTML结构

您已将卡放在 Vue 应用程序安装目标之外（html 内的

div id="app"

）。这就是为什么卡片只显示

{...}

的原因。另外，我已将

<div  id="app"/>

替换为 `，因为您的 CSS 使卡片覆盖并覆盖了列表。

  <main id="app">
    <nav>
      <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, index) in filteredCountries" method="GET" @click="selectCountry(country, index)">
          <img :src="getFlagSrc(country)">
          {{ getName(country).common }}
        </div>
      </div>
    </nav>

    <section :style="`{background-image: url('${selectedFlagSrc}')}`">
      <div class="card-container">
        <div class="card">

          <div class="card-title" id="card_title" method="GET" v-if="selectedCountry" v-for="name in selectedCountry.name.common">
            <img :src="selectedFlagSrc" alt="" />
            {{ selectedCountry.name.common }}
          </div>

          <div class="card-body" id="card_body">
            <div><strong>Code: </strong>{{ selectedCode }}</div>
            <div><strong>Capital: </strong>{{ selectedCapital }}</div>
            <div><strong>Region: </strong>{{ selectedSubregion }}</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 :href="selectedLatlngUrl" target="_blank">{{ selectedLatlng }}</a></div>-->
          </div>
        </div>
      </div>
    </section>
  </main>

而且，你没有关闭很多标签而放错了地方。就像您在

<nav>

之前打开

<div>

但在

<nav>

 之前关闭 

<div>

一样

计算并挂钩

首先，如果您没有为其声明 setter，请不要修改

computed

。这就是我删除

countries

并将其更改为

data

的原因

不要将 API 调用（ajax、fetch）放入计算属性中。我已将

computed.countries

中的所有逻辑移至您的

mounted

中。我还删除了你的过滤机制，你需要在侧面重新实现它，因为我不太明白它是如何工作的。这就是你的

mounted

的样子mounted

我也删除了你的

mounted() {
    (async () => {
      const response = await fetch("https://restcountries.com/v3.1/all");
      let countries = await response.json();
      countries.sort((a, b) => a.name.common.localeCompare(b.name.common));

     this.countries = countries;
      // After mount, pick South Africa as default

      for (let [i, country] of Object.entries(this.countries)) {
        if (country["name"]["common"] === 'South Africa') {
          this.selectCountry(country, i);

          return;
        }
      }

      this.selectCountry(this.countries[0], 0);
    })();
  },

，因为它没有做任何事情，因为你在

beforeMount

中声明了它并且你没有调用它属性

您在 HTML 模板中使用了一些未声明的属性，例如

methods

方法

selectedFlagSrc

需要

selectCountry

才能工作。如果

index

为空，下面的行将失败index

但是您在不提供 

self.search = self.filteredCountries[index].name.common;

的情况下使用它

index

mounted

还有很多事情需要检查。在进一步操作之前，您应该重新检查您的代码。请耐心等待并小心编码。

---

既然您像这样编写 Vue 应用程序，我建议您查看 Vue 文档来创建原生 Vue 项目。将块拆分为组件可以帮助您更轻松地调试代码

祝你好运