Axios is a great http client library for making Ajax requests. It's also quite easy to use with Vue. It uses promises by default and runs on both the client and the server (which makes it appropriate for fetching data during server-side rendering). It provides a simple and rich API. You can combine it with async/await.
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript" src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="axios">
<p v-if="this.users.length ==0">loading...</p>
<ul>
<li v-for="user in users">{{ user.name }}</li>
</ul>
</div>
<script>
new Vue ({
el: '#axios',
data: {
users : [],
url : 'https://nexladder.com/users.json',
},
created() {
var vm = this;
axios.get(this.url)
.then(function(response) {
vm.users=response.data
})
}
})
</script>
</body>
</html>
Output
loading...