Vue.js Unsplash Example

Use the Unsplash API to search and load images.

by teewelk

HTML

<div id="app">
  <input type="text" v-model="query">
  <button type="button" v-on:click="updateQuery">Go</button>
  <img v-for="image in images" src="{{ image.urls.small }}" alt="">
</div>

JavaScript

var CLIENT_ID = "51cb7b2d3bdd0eb9d2ae22e113055f4e32bb5a873f27146e80f85d90544d5f5a";
function makeQuery(query) {
  return "https://api.unsplash.com/photos/search/?query=" + query +  "&client_id=" + CLIENT_ID;
}

function doQuery(self) {
  window.fetch(makeQuery(self.query))
  .then(function(res){
    return res.json();
  })
  .then(function(res){
    self.images = res;
  }); 
}

var application = new Vue({
  el: "#app",
  data: {
  	query: '',
  	images: []
  },
  ready: function() {
	  doQuery(this);
  },
  methods: {
    updateQuery: function() {
    	console.log(this.query);
		  doQuery(this);
    }
  }
});