const ENDPOINT = 'https://api.github.com/orgs/codecasts/repos'; new Vue({ el: '#app', data: { repos: [], }, mounted() { axios.get(ENDPOINT) .then(response => response.data) .then(data => Vue.set(this, 'repos', data)); }, computed: { list() { return _.orderBy(this.repos, 'name'); }, } });
<div class="container" id="app"> <header class="page-header"> <h1>Codecasts Repos</h1> </header> <ul class="list-group"> <li v-for="repo in list" class="list-group-item" :title="repo.description"> <span class="badge"> {{ repo.stargazers_count }} <i class="fa fa-star-o"></i></span> <a :href="repo.url"> {{ repo.name }} </a> </li> </ul> </div>