https://www.positronx.io/handle-ajax-requests-in-vue-js-with-axios-fetch-api/
https://blog.bitsrc.io/requests-in-vuejs-fetch-api-and-axios-a-comparison-a0c13f241888
<template>
<div id="app"> {{data}} </div>
</template>
<script>
export default {
name: "App",
data() {
return {
data: {}
}
},
beforeMount(){
this.getName();
},
methods: {
async getName(){
const res = await fetch('https://api.agify.io/?name=michael');
const data = await res.json();
this.data = data;
}
}
};
</script>
https://www.positronx.io/handle-ajax-requests-in-vue-js-with-axios-fetch-api/
<template>
<div>
<ul class="test-list" v-for="user in usersList" :key="user.id">
<li class="test-list--item">
<strong>{{ user.name }}</strong> <br>
{{ user.email }} <br>
{{ user.website }}
</li>
</ul>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
usersList: []
};
},
mounted() {
axios.get("https://jsonplaceholder.typicode.com/users")
.then(res => {
this.usersList = res.data;
console.log(this.usersList)
})
.catch(error => {
console.log(error)
// Manage errors if found any
})
}
};
</script>
<style>
ul {
margin: 0 auto;
width: 300px;
text-align: left;
}