jquery 在卡片容器中显示世界各国的国家API信息(首都、货币.)

bqjvbblv  于 2023-11-17  发布在  jQuery
关注(0)|答案(2)|浏览(221)

我正在尝试显示南非的卡信息作为默认值(在输入任何国家的名称到搜索栏输入字段或选择一个特定的国家出一个给定的列表)和相应的国家信息的细节在卡容器!在这种情况下,我使用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>

字符串
x1c 0d1x的数据
我希望解决这个问题的默认值!所有周围的卡容器的权利应该看到南非国旗作为默认bbefore作出任何选择(之后分别-所选或国家的给定标志输入到下图左侧的输入字段中)!不幸的是,到目前为止,有关所选国家的信息尚未正确传输到右侧的卡容器中;(!

kmynzznz

kmynzznz1#

我已经设法修复了你的代码
你的代码中有很多问题,而且还有更多。你真的应该检查一下

HTML结构

你把卡片放在Vue应用程序挂载目标之外(div id="app"在你的html中)。这就是为什么卡片只显示{...}的原因。另外,我用<main 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>

字符串
而且,你没有关闭很多标签,也没有把它们放错地方,比如你在<div>之前打开<nav>,但是在<div>之前关闭<nav>

计算并钩子

首先,如果没有声明setter,不要修改computed,这就是我删除countries并将其更改为data的原因
不要把你的API调用(api,fetch)放在计算属性中。我已经把x1m11 n1x中的所有逻辑都移到了你的x1m12 n1x中。我还删除了你的过滤器机制,你需要在x1m13 n1x中重新实现它,因为我真的不明白它是如何工作的。这就是你的x1m14 n1x的样子

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,因为它没有做任何事情,因为你在methods中声明了它,而你没有调用它。

属性

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

方法

selectCountry需要index才能工作。如果index为null,则下面一行将失败

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


但是您使用它时没有在mounted上提供index

this.selectCountry(this.countries[0])


还有很多需要检查的地方。您应该在进一步移动之前重新检查代码。请耐心等待并小心编码。
既然你是这样编写Vue应用程序的,我建议你看看Vue文档来创建一个原生的Vue项目。
这是修复https://codepen.io/duckstery/pen/vYbmVmZ后的代码
祝你好运

57hvy0tb

57hvy0tb2#

到目前为止,我已经成功地解决了背景主题,即卡片容器标题重复的主题,并且还可以返回绝大多数卡片容器值(混合了你和我的代码部分),除了货币和语言,这在restcountries API的v3.1中肯定更具挑战性,我现在必须更详细地考虑x1c 0d1x。南非的默认值(beforeMount)和货币和语言的地理数据信息仍然缺失,需要详细说明!
如果这里的任何一个人才流失有任何建议或想法如何科普剩下的部分,我会非常感谢任何提示;)!
对于那些一直喜欢训练大脑和解决具有挑战性的任务的人,我在此提供我的更新代码(见下面的codepen-link)!因为我很清楚它到目前为止并不完美,我正在尽我所能改进和进一步阐述它!

相关问题