Attention ! Ceci ne fonctionne que si les scripts sont sur un serveur web.

 

Fichier html final :

Version JSON

Version XML

<html>

<head>

<meta charset="ISO">

<title>Requete http avec vue js3 et axios</title>

</head>

 

<body>

<div id='app'>

    <select v-model='id'>

        <option>1</option>

        <option>2</option>

        <option>3</option>

        <option>4</option>

        <option>5</option>

        <option>6</option>

        <option>7</option>

        <option>8</option>

        <option>9</option>

        <option>10</option>

    </select>

    <button @click='fetchAPI'> Voir le proverbe</button>

    <br/>

    <ol>

        <div v-for="objet in tabObjets">

            <span v-if="objet.id==id">{{ objet.proverbe }}</span>

        </div>

    </ol>

</div>

<script src="https://unpkg.com/vue@next"></script> <!-- pour utiliser vue js -->

<script src="./app.js"></script> <!-- notre application vue js -->

<script src="https://unpkg.com/axios/dist/axios.min.js" ></script> <!-- pour utiliser axios (facilite les requetes http) -->

 

</body>

</html>

<html>

<head>

<meta charset="ISO">

<title>Requete http avec vue js3 et axios</title>

</head>

 

<body>

<div id='app'>

                Choisir un proverbe :

    <select v-model='id' @change="fetchAPI">

        <option>1</option>

        <option>2</option>

        <option>3</option>

        <option>4</option>

        <option>5</option>

        <option>6</option>

        <option>7</option>

        <option>8</option>

        <option>9</option>

        <option>10</option>

    </select>

    <br/>

    <ol>

        <div>

            <span v-show="id > 0">{{ monProverbe }}<br></span>

        </div>

    </ol>

</div>

<script src="https://unpkg.com/vue@next"></script> <!-- pour utiliser vue js -->

<script src="https://unpkg.com/axios/dist/axios.min.js" ></script> <!-- pour utiliser axios (facilite les requetes http) -->

<script src="./app.js"></script> <!-- notre application vue js -->

 

 

</body>

</html>

 

Et fichier app.js  final:

VersionJSON

Version XML

const API = "./proverbes.json"

const app = Vue.createApp({

    data() {

        return {

            tabObjets : [],

            proverbe : '',

            id : 1

        }

    },

    methods : {

        async fetchAPI() {

            await axios.get(API)

            .then((response)=>{

                this.tabObjets = response.data

            })

            .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"

const API = "./proverbes.xml"

const app = Vue.createApp({

    data() {

        return {

                                               id: 0,

                                               monProverbe: '',

        }

    },

    methods : {

        async fetchAPI() {

            await axios.get(API)

            .then((response)=>{

                parser = new DOMParser();

                xmlDoc = parser.parseFromString(response.data, "text/xml");

                                                               mesProverbes = xmlDoc.getElementsByTagName("proverbe");

                                                               this.monProverbe = mesProverbes.item((this.id - 1)).firstChild.nodeValue;

            })

            .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"