now with top 10 link.

Author: mikeckennedy

days/093-096-vuejs/movie_exploder/js/site.js

@@ -3,7 +3,16 @@
 app = new Vue({
     el: '#app',
     data: {
-        search_text: "initial value",
+        search_text: null,
         movies: movies_temp.hits
+    },
+    methods: {
+        search: function() {
+            let text = this.search_text
+            console.log("Would have searched for " + text)
+        },
+        top_10: function() {
+            console.log("Would have loaded top 10")
+        }
     }
 })

days/093-096-vuejs/movie_exploder/views/index.html

@@ -13,8 +13,19 @@
     <div class="card" id="app">
         <h1>Movie Exploder</h1>
 
-        <!--suppress HtmlFormInputWithoutLabel -->
-        <input type="text" v-model="search_text">
+        <div class="controls">
+            <!--suppress HtmlFormInputWithoutLabel -->
+            <input type="text" v-model="search_text"
+                   class="form-control"
+                   placeholder=" Search for a movie by keyword"
+                   @keyup.enter="search()"
+            >
+
+            <div class="subcontrols">
+                <a class="top_10" @click="top_10()">Top 10</a>
+            </div>
+
+        </div>
 
         <div class="movies">
             <div class="movie" v-for="m in movies">