import Vue from 'vue';

import api from './api';

new Vue({
  el: '#app',
  template: `
    <div>
      <h1>Search Hacker News with Ladda</h1>
      <p>There shouldn't be a second network request, when you search for something twice.</p>
      <input v-model="query">
      <button v-on:click="onSearch">Search</button>
      <div v-for="item in list">
        {{item.title}}
      </div>
    </div>
  `,
  data: {
    list: [],
    query: '',
  },
  methods: {
    onSearch() {
      api.hackernews.getList(this.query).then(hits => this.list = hits);
    },
  }
});

@@ -242,13 +242,85 @@
    %3C
-input
+form type=%22submit%22 v-on:submit.prevent=%22onSearch%22%3E%0A        %3Cinput type=%22text%22
  v-m
@@ -331,18 +331,21 @@
 =%22query%22
+/
 %3E%0A
+  
       %3Cb
@@ -354,28 +354,18 @@
 ton 
-v-on:click=%22onSearch
+type=%22text
 %22%3ESe
@@ -378,16 +378,30 @@
 button%3E%0A
+      %3C/form%3E%0A
       %3Cd

Update Vue example to use form