JSFiddle - React, Tailwind, and code Playground

by drawcard

HTML

<h1>MyFonts API Browser</h1>

<div id="app">
  <form>
    <input type="text" class="name" v-model="criteria.name" />
    {{criteria.name}}
    <input type="submit" v-on:click="nameSearch" />
  </form>

  <div class="results">
    <div class="results-list" v-for="result in fonts.results">
      <h1 :v-html="result.name">{{result.name}}</h1>
    </div>
  </div>
</div>
<!--#app-->

<small>Made with the MyFonts API, by Drawcard.</small>

Vue

var vueapp = new Vue ({
  // Initialise the data object
	el: '#app',
  data: {
    id: 'O6d1m4XPuukOv0dPwt09Pe2pB',
  	fonts: {
    	results: {}
    },
    criteria: {
    	name: null
    }
  },
  methods: {
  	nameSearch: function () {
    fetch('https://api.myfonts.net/v1/family?api_key='+this.id+'&name='+this.criteria.name)
  	.then(response => response.json())
  	.then(data => {
  	   this.fonts = data;
  	})
  	.catch(error => console.log(error));
    },
  },
});