utliser l'api rest au tableau

front
gwen 1 year ago
parent f8e5d1f094
commit cde9f77088

@ -1,4 +1,6 @@
<script> <script>
import { REST_API } from '@/assets/const';
import LigneScientifique from './ligneScientifique.vue'; import LigneScientifique from './ligneScientifique.vue';
export default{ export default{
@ -6,11 +8,25 @@ export default{
return { return {
//données obtenues par l'api //données obtenues par l'api
scientifiques: [ scientifiques: [
{prenom:"marie",nom:"curie",date:"1900-01-13",descriptif:"radaition qqch comme ca"}, ],
{prenom:"albert",nom:"einstein",date:"1900-01-13",descriptif:"theorie"} page:0,
]
}; };
}, },
mounted(){
this.getScientifiques(0)
},
methods:{
getScientifiques(page){
//appeler l'API
fetch(`${REST_API}/scientifiques?page=${page}`).then(response=>{
response.json().then(json=>{
//prendre le scientifique de la requete
this.scientifiques=json._embedded
})
})
}
},
components: { LigneScientifique } components: { LigneScientifique }
} }
</script> </script>
@ -31,9 +47,10 @@ export default{
<LigneScientifique v-for="scientifique in scientifiques" <LigneScientifique v-for="scientifique in scientifiques"
:prenom="scientifique.prenom" :prenom="scientifique.prenom"
:nom="scientifique.nom" :nom="scientifique.nom"
:date="scientifique.date" :date="scientifique.dateNaissance"
:descriptif="scientifique.descriptif" :descriptif="scientifique.descriptif"
></LigneScientifique> ></LigneScientifique>
</tbody> </tbody>
</table> </table>
<!-- TODO : pagination -->
</template> </template>
Loading…
Cancel
Save