vue.js step2

vue.js step2

by ydozen

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="issues">
  <h2>Latest {{repository}} Issues</h2>
  <div>
    <input type="text" v-model="repository">
  </div>
  <div>
    <input type="text" v-model="searchText">
    <div v-show="hasIssue">
      <div v-for="issue in issues" v-if="issue.title.indexOf(searchText) > -1" 
           class="issue-default">
        <a :href="issue.html_url" target="_blank">
          {{issue.title}}
        </a><br/>
        <span>#{{issue.number}} at {{issue.updated_at | formatDate}}</span>
      </div>
    </div>
    <div v-else>
      The repository {{repository}} does not exist!
    </div>
  </div>
</div>

CSS

.issue-default{
  padding: 10px; 
}
.issue-default a {
  font-weight: bold;
  font-size: 18px;
  text-decoration: none;
  color:slategray;
}
.issue-default span {
  color:#767676;
  font-size: 12px;
}

JavaScript

var ISSUES = "https://api.github.com/repos/ydozen/frotend2/issues?state=open"

var app = new Vue({
  el: "#issues",
  data: {
  	repository: "vuejs/vue",
    searchText: "",
    issues: []
  },
  created: function () {
    this.fetchData()
  },
  watch: {
    repository: "fetchData"
  },
  filters: {
  	formatDate: function (v) {
      return v.replace(/T|Z/g, ' ')
    }
  },
  computed: {
  	hasIssue: function(){
    	return this.issues.length > 0 ? true : false;    
    }  	
  },
  methods: {
    fetchData: function () {
      var xhr = new XMLHttpRequest();
      var self = this;
      xhr.open("GET", ISSUES.replace("[R]", this.repository));
      xhr.onload = function () {
        self.issues = JSON.parse(xhr.responseText);
      }
      xhr.send()
    }
  }
})