Now searching via the API not test data.

Author: mikeckennedy

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

@@ -204,24 +204,4 @@ genres_temp = [
     "biography",
     "comedy",
     "crime",
-    "documentary",
-    "drama",
-    "family",
-    "fantasy",
-    "film-noir",
-    "game-show",
-    "history",
-    "horror",
-    "music",
-    "musical",
-    "mystery",
-    "news",
-    "reality-tv",
-    "romance",
-    "sci-fi",
-    "short",
-    "sport",
-    "thriller",
-    "war",
-    "western"
 ]

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

@@ -1,5 +1,7 @@
 // noinspection ES6ModulesDependencies
 
+const base_url = "http://movie_service.talkpython.fm/api/"
+
 app = new Vue({
     el: '#app',
     data: {
@@ -12,13 +14,23 @@ app = new Vue({
     methods: {
         search: function () {
             let text = this.search_text
-            console.log("Would have searched for " + text)
+            this.load_movies(base_url + "search/" + text)
         },
         top_10: function () {
             console.log("Would have loaded top 10")
         },
         load_genre: function (genre) {
             console.log("Would load " + genre)
+        },
+        load_movies: function (url) {
+            let that = this
+            axios.get(url)
+                .then(function (response) { // handle success
+                    that.movies = response.data.hits
+                })
+                .catch(function (error) { // handle error
+                    console.log("ERROR! " + error);
+                })
         }
     }
 })

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

@@ -54,6 +54,7 @@ <h1>Movie Exploder</h1>
 
 <script src="../js/vue/vue.js"></script>
 <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
+<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 <script src="../js/fake_data.js"></script>
 <script src="../js/site.js"></script>
 <script src="../js/dropdown.js"></script>