Vue Example 2

by jeremenichelli

HTML

<script src="https://cdn.jsdelivr.net/vue/1.0.0/vue.js"></script>

<div id="app"></div>

CSS

body {
    font-family: sans-serif;
}

Babel + JSX

// search form component
Vue.component('search-box', {
    template: `
    <form action="?" class="search__form" @submit="onSearch">
      <input type="text" class="search__input" placeholder="Search" v-model="title">
      <button type="submit"
        class="search__button"
        :disabled="searching">Search</button>
    </form>
  `,
    data() {
        return {
            title: '',
            searching: false
        }
    },
    methods: {
        onSearch() {
            const BASE_URL = 'https://www.omdbapi.com/?r=json';

            this.searching = true;

            fetch(`${ BASE_URL }&s=${ this.title }`)
                .then(response => response.json())
                .then(data => {
                    this.searching = false;

                    // do something with data
                });
        }
    }
});

new Vue({
    el: `#app`,
    template: `
    	<h1>Search</h1>
    	<h2>Movies</h2>
    	<search-box></search-box>
  `
});