Vue REsource with github

Getting github data with vue-resource

by phsiao2000

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.7.0/vue-resource.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.js"></script>
<script src="        https://rawgit.com/codebox/moment-precise-range/master/readable-range.js"></script>
<div id="demoList">
  <h1>Latest Vue.js Commits</h1>

  <table>
    <tr v-for="item in items">
      <td class="message">{{item.commit.message}}</td>
      <td class="author">{{item.commit.author.name}}</td>
      <td class="date">{{fmt(item.commit.author.date)}}</td>
    </tr>
  </table>

</div>

CSS

* {
}

table { border-collapse: collapse; }

td {
    padding-top: .4em;
    padding-bottom:.4em;
    padding-left:.5em;
}

tr:nth-child(odd) {
  background-color: lightgray;
}

JavaScript

var apiURL = 'https://api.github.com/repositories/11730342/commits?per_page=100&sha=';

var demoList = new Vue({

  el: '#demoList',

  data: {
    currentBranch: 'dev',
    items: []
  },

  created: function() {
    this.fetchData();
  },

  methods: {
    fmt: function(d) {
      return moment(d).preciseDiff(Date.now()) + " ago"
    },
    fetchData: function() {
      this.$http.get(apiURL, function(data) {
        this.items = data;
        console.log(data);
      });

    }

  }
});