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

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后的代码
祝你好运

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