Created
October 5, 2021 17:35
-
-
Save hackertron/554694031e8a21ca4b2c7108411ca82e to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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') |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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/[email protected]/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/[email protected]/dist/js/bootstrap.min.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment