On dispose d'une API qui fournit la liste des pays européens.
Celle-ci est accessible à l'adresse suivante :
https://restcountries.eu/rest/v2/region/europe?fields=name
A partir de celle-ci, et en utilisant Vue js, on souhaite obtenir l'affichage ci-dessous :
_fichiers/image001.jpg)
L'affichage est affiné en fonction de la saisie dans la zone input.
On fournit le fichier html de départ :
<html>
<head>
<script>
</script>
<style type="text/css">
input,select
{
font-family:Arial;
font-size:11px;
background-color:lightgray;
width:220;
}
</style>
</head>
<body>
<form name='f1'>
Liste des pays : <br/>
<input type='text' id='saisiePays'>
<br/>
<select id='affichePays' size='10'>
</select>
</form>
</html>
Et le fichier app.js de départ :
const API = "https://restcountries.eu/rest/v2/region/europe?fields=name";
const app = Vue.createApp({
data() {
return {
}
},
methods : {
async fetchAPI() {
await axios.get(API)
.then((response)=>{
})
.catch((error)=>{
console.log(error)
})
}
}
});
const vm = app.mount('#app'); // mount spécifie que l'application Vue s'affichera dans la div avec id="app"
T.A.F.
Réaliser cette application