Skip to content

Instantly share code, notes, and snippets.

@canokay

canokay/vue-github-api.html

Last active February 18, 2020 21:07
Show Gist options
  • Save canokay/610198ccee8d3b2032e250b146bff962 to your computer and use it in GitHub Desktop.
Save canokay/610198ccee8d3b2032e250b146bff962 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
vue-github-api.html
<!doctype html>
<html lang="en">
<head>
<title>Vue - Github User</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div class="container text-center">
<div class="row justify-content-center">
<div class="col-12 col-md-10 col-lg-8">
<div class="card-body row no-gutters align-items-center">
<!--end of col-->
<div class="col">
<input type="search" class="form-control" v-model="query" class="form-control form-control-lg form-control-borderless" placeholder="Search Github User">
</div>
<!--end of col-->
<div class="col-auto">
<button class="btn btn-lg btn-success" v-on:click="search()">Search</button>
</div>
<!--end of col-->
</div>
<div id="user" v-if="user">
<h1>{{user.name}}</h1>
<img v-bind:src="user.avatar_url" alt="" srcset="">
</div>
</div>
<!--end of col-->
</div>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
query: "",
user:false
},
methods:{
search: function(){
fetch('https://api.github.com/users/'+this.query)
.then(user => user.json())
.then(user => {
this.$set(this, 'user', user)
})
},
}
})
</script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment