hackertron/app.js

## app.js
const app = Vue.createApp({
    data() {
        return {
            title : 'List of countries',
            countries : [],
            country: {},
            showCountry: false,

        }
    },
    methods:{
        fetchCountries: function(){
            let url = 'https://restcountries.com/v3.1/all'
            axios.get(url).then(response => {
                this.countries = response.data
                console.log(response.data)
            })
        },
        DetailCountry: function(alpha2Code){
            let allCountries = this.countries
            let selectedCountry = allCountries.filter(country => country.cca2 === alpha2Code)
            this.country = selectedCountry
            this.showCountry = true
        },
        ShowCountries: function(){
            this.showCountry = false
        }
        },
    mounted(){
        this.fetchCountries()
    }
})
app.mount('#app')

## restcountries.html
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Learning Vue API</title>
  <!-- bootstrap -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css">

  <script src="https://unpkg.com/vue@next"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>


  <div id="app">
    <div class="container">
      <div v-if="showCountry">
            <a href="#" @click.prevent="ShowCountries" class="btn btn-success">All Countries</a>
            <div v-for="c in country">
              <div class="card" style="width: 18rem;">
                <img class="card-img-top" :src="c.flags.png" alt="Card image cap">
                <div class="card-body">
                  <h5 class="card-title">{{ c.name.common }}</h5>
                  <p class="card-text">Capital city : {{ c.capital }}</p>
                  <p class="card-text">Population : {{ c.population }}</p>
                  <p class="card-text">Continent : {{ c.region }}</p>
                  <p class="card-text">cca2 : {{ c.cca2 }}</p>
                </div>
              </div>
            </div>
      </div>
      <div v-else>
        <h1>{{ title }}</h1>
        <div class="row">
          <div class="col-md-3" v-if="countries.length > 0" v-for="country in countries">
            <div class="card" style="width: 18rem;">
              <img class="card-img-top" :src="country.flags.png" alt="Card image cap">
              <div class="card-body">
                <h5 class="card-title">{{ country.name.common }}</h5>
                <p class="card-text">Capital city : {{ country.capital }}</p>
                <p class="card-text">Population : {{ country.population }}</p>
                <p class="card-text">Continent : {{ country.region }}</p>
                <p class="card-text">cca2 : {{ country.cca2 }}</p>
                <a href="#" @click.prevent="DetailCountry(country.cca2)" class="btn btn-primary">Detail info</a>
              </div>
            </div>
          </div>
        </div>

      </div>
      </div>

    </div>
  </div>


  <script src="app.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"></script>
</body>
</html>
	const app = Vue.createApp({
	data() {
	return {
	title : 'List of countries',
	countries : [],
	country: {},
	showCountry: false,

	}
	},
	methods:{
	fetchCountries: function(){
	let url = 'https://restcountries.com/v3.1/all'
	axios.get(url).then(response => {
	this.countries = response.data
	console.log(response.data)
	})
	},
	DetailCountry: function(alpha2Code){
	let allCountries = this.countries
	let selectedCountry = allCountries.filter(country => country.cca2 === alpha2Code)
	this.country = selectedCountry
	this.showCountry = true
	},
	ShowCountries: function(){
	this.showCountry = false
	}
	},
	mounted(){
	this.fetchCountries()
	}
	})
	app.mount('#app')
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Learning Vue API</title>
	<!-- bootstrap -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css">

	<script src="https://unpkg.com/vue@next"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

	</head>
	<body>


	<div id="app">
	<div class="container">
	<div v-if="showCountry">
	<a href="#" @click.prevent="ShowCountries" class="btn btn-success">All Countries</a>
	<div v-for="c in country">
	<div class="card" style="width: 18rem;">
	<img class="card-img-top" :src="c.flags.png" alt="Card image cap">
	<div class="card-body">
	<h5 class="card-title">{{ c.name.common }}</h5>
	<p class="card-text">Capital city : {{ c.capital }}</p>
	<p class="card-text">Population : {{ c.population }}</p>
	<p class="card-text">Continent : {{ c.region }}</p>
	<p class="card-text">cca2 : {{ c.cca2 }}</p>
	</div>
	</div>
	</div>
	</div>
	<div v-else>
	<h1>{{ title }}</h1>
	<div class="row">
	<div class="col-md-3" v-if="countries.length > 0" v-for="country in countries">
	<div class="card" style="width: 18rem;">
	<img class="card-img-top" :src="country.flags.png" alt="Card image cap">
	<div class="card-body">
	<h5 class="card-title">{{ country.name.common }}</h5>
	<p class="card-text">Capital city : {{ country.capital }}</p>
	<p class="card-text">Population : {{ country.population }}</p>
	<p class="card-text">Continent : {{ country.region }}</p>
	<p class="card-text">cca2 : {{ country.cca2 }}</p>
	<a href="#" @click.prevent="DetailCountry(country.cca2)" class="btn btn-primary">Detail info</a>
	</div>
	</div>
	</div>
	</div>

	</div>
	</div>

	</div>
	</div>


	<script src="app.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"></script>
	</body>
	</html>