vYNeNbO

index.html

<h1>Hello TIMDEX!</h1>

<div id="app">
  <input type="text" v-model="term">
  Term: {{ term }}
  
  <div v-if="results!=null">
  Hits: {{ results.hits }}
  Limit: {{ results.request_count }} / {{ results.request_limit }}
  <div class="results" v-for="item in results.results">
    <div class="item">
      <ul>
        <li>{{ item.source }}</li>
        <li>{{ item.title }}</li>
        <li><a v-bind:href="item.source_link">View Soure Record</a></li>
      </ul>
    </div>
  </div>
  </div>
</div>

script.js

var app = new Vue ({
  el: '#app',
  data: {
    results: null,
    term: null
  },
  watch: {
    term: function() {
   fetch('https://timdex.mit.edu/api/v1/search?q=' + this.term)
    .then(response => response.json())
    .then(data => {
     this.results = data;
   })
  }
  }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>

vynenbo.markdown

vYNeNbO

A Pen by Jeremy Prevost on CodePen.

License.