Skip to content

Instantly share code, notes, and snippets.

@smccoy78

smccoy78/gist:06c4a38082a003f10e68ab4f93aab97b

Created April 30, 2020 21:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save smccoy78/06c4a38082a003f10e68ab4f93aab97b to your computer and use it in GitHub Desktop.
Save smccoy78/06c4a38082a003f10e68ab4f93aab97b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<title>Assignment #7</title>
</head>
<body>
<div id="app">
<div class="container">
<github-user-card v-for="user in users" :username="user"></github-user-card>
</div>
</div>
<template id="user-card-template">
<div class="card" style="width: 18rem;">
<img class="card-img-top" :src="user.avatar_url">
<div class="card-body">
<h5 class="card-title">{{ user.name }}</h5>
<p class="card-text">{{ user.followers }}</p>
</div>
</div>
</template>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
Vue.component('github-user-card', {
template: '#user-card-template',
props: ['username'],
data () {
return {
user: null
}
},
methods: {
},
created () {
axios.get('https://api.github.com/users/' + this.username).then(response => {
this.user = response.data
})
}
});
new Vue({
el: '#app',
data: {
users: [
'smccoy'
]
},
methods: {
}
})
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment