Skip to content

Instantly share code, notes, and snippets.

@Hammer2900

Hammer2900/vue parse rest example

Created June 21, 2017 05:10
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 Hammer2900/8e59f6d378a8afab3c1d9b514f84752c to your computer and use it in GitHub Desktop.
Save Hammer2900/8e59f6d378a8afab3c1d9b514f84752c to your computer and use it in GitHub Desktop.
Download ZIP
vue auto refresh table with REST
Raw
vue parse rest example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<style type="text/css">
.my_up {
color: darkgreen;
}
.my_down {
color: crimson;
}
/*.tg {*/
/*border-collapse: collapse;*/
/*border-spacing: 0;*/
/*border-color: #aabcfe;*/
/*}*/
/*.tg td {*/
/*font-family: Arial, sans-serif;*/
/*font-size: 14px;*/
/*padding: 10px 5px;*/
/*border-style: solid;*/
/*border-width: 1px;*/
/*overflow: hidden;*/
/*word-break: normal;*/
/*border-color: #aabcfe;*/
/*color: #669;*/
/*background-color: #e8edff;*/
/*}*/
/*.tg th {*/
/*font-family: Arial, sans-serif;*/
/*font-size: 14px;*/
/*font-weight: normal;*/
/*padding: 10px 5px;*/
/*border-style: solid;*/
/*border-width: 1px;*/
/*overflow: hidden;*/
/*word-break: normal;*/
/*border-color: #aabcfe;*/
/*color: #039;*/
/*background-color: #b9c9fe;*/
/*}*/
/*.tg .tg-baqh {*/
/*text-align: center;*/
/*vertical-align: top*/
/*}*/
/*.tg .tg-mb3i {*/
/*background-color: #D2E4FC;*/
/*text-align: right;*/
/*vertical-align: top*/
/*}*/
/*.tg .tg-lqy6 {*/
/*text-align: right;*/
/*vertical-align: top*/
/*}*/
/*.tg .tg-6k2t {*/
/*background-color: #D2E4FC;*/
/*vertical-align: top*/
/*}*/
/*.tg .tg-yw4l {*/
/*vertical-align: top*/
/*}*/
</style>
</head>
<body>
<div id="app">
<!--<button type="button" class="btn btn-primary" v-on:click="sortedd">Sort</button>-->
<!--<p>{{ text }}</p>-->
<!--<input type="text" v-model="text">-->
<!--<p>{{commits}}</p>-->
<!--<ul id="example-1">-->
<!--<li v-for="item in commits">-->
<!--{{ item }}-->
<!--</li>-->
<!--</ul>-->
<div class="container-fluid">
<div class="row">
<div class="col">
<h1 class="text-center">COINMARKETCAP</h1>
</div>
</div>
<div class="row">
<div class="col">
<button type="button" class="btn btn-primary" v-on:click="fetchData">
Start
<i v-if="load" class="fa fa-circle-o-notch fa-spin fa-fw"></i>
</button>
</div>
</div>
<div class="row">
<div class="col">
<hr>
</div>
</div>
</div>
<!--<div class="container-fluid">-->
<!--<div class="row">-->
<!--<div class="col">-->
<!--<div class="alert alert-warning" role="alert">-->
<!--<strong>Warning!</strong> Better check yourself, you're not looking too good.-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<div class="row">-->
<!--<div class="col">-->
<!--<div class="alert alert-success" role="alert">-->
<!--<strong>Warning!</strong> Better check yourself, you're not looking too good.-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<div class="container-fluid">
<div class="row">
<div class="col col-sm-12">
<table class="table table-striped table-sm">
<tr>
<th class="tg-yw4l">#</th>
<th class="tg-yw4l">name</th>
<th class="tg-yw4l">symbol</th>
<th class="tg-yw4l">price(usd)</th>
<th class="tg-yw4l">price(rub)</th>
<th class="tg-yw4l">price(eur)</th>
<th class="tg-yw4l">change 1h</th>
<th class="tg-yw4l">change 24h</th>
<th class="tg-yw4l">change 7d</th>
</tr>
<tr v-for="item in commits">
<td class="tg-yw4l">{{ item.position }}</td>
<td class="tg-yw4l"><a target="_blank" href="https://www.google.com.ua/search?q={{item.name}}">{{
item.name }}</a></td>
<td class="tg-yw4l">{{ item.symbol }}</td>
<td class="tg-yw4l">{{ item.price.usd }}</td>
<td class="tg-yw4l">{{ item.price.rub }}</td>
<td class="tg-yw4l">{{ item.price.eur }}</td>
<td v-bind:class="{ my_up: item.change1h >= 0, my_down: item.change1h <= 0}" class="tg-yw4l">{{ item.change1h }}</td>
<td class="tg-yw4l">{{ item.change24h }}</td>
<td class="tg-yw4l">{{ item.change7d }}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"
integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"
integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/messenger/1.5.0/js/messenger.min.js"></script>
<script>
const apiURL = 'https://crossorigin.me/http://coinmarketcap.northpole.ro/api/v6/all.json';
// const apiURL = 'https://jsonplaceholder.typicode.com/todos';
app = new Vue({
el: '#app',
data: {
login: false,
text: 'izot',
password: '12345',
load: false,
commits: [],
},
methods: {
greet: function () {
alert()
},
fetchData: function () {
Messenger();
this.load = true;
axios.get(apiURL)
// .then(response => this.commits = response.data.markets)
.then(function (response) {
// console.log(response.data);
// console.log(response.status);
// console.log(response.statusText);
// console.log(response.headers);
// console.log(response.config);
this.commits = _.reverse(response.data.markets);
// this.commits = _.slice(this.commits, 0, 10);
this.load = false;
}.bind(this))
.catch(function (error) {
console.log(error);
});
},
},
mounted: function () {
this.fetchData();
this.interval = setInterval(function () {
this.fetchData();
}.bind(this), 36000);
},
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment