Listen for movie changes and save movie.

Author: lbogdan

src/components/MovieItem.vue

@@ -37,5 +37,13 @@ export default {
       required: true,
     },
   },
+  watch: {
+    item: {
+      handler(newValue) {
+        this.$emit('change', newValue);
+      },
+      deep: true,
+    },
+  },
 };
 </script>

src/pages/MovieList.vue

@@ -1,12 +1,17 @@
 <template>
   <loading-indicator v-if="isLoading" message="Loading movies..." />
   <div v-else class="row">
-    <movie-item v-for="movie in movies" :item="movie" :key="movie.id" />
+    <movie-item
+      v-for="movie in movies"
+      :item="movie"
+      :key="movie.id"
+      @change="onChange"
+    />
   </div>
 </template>
 
 <script>
-import { getMovies } from '@/api';
+import { getMovies, saveMovie } from '@/api';
 import MovieItem from '@/components/MovieItem.vue';
 import LoadingIndicator from '@/components/LoadingIndicator.vue';
 
@@ -29,5 +34,10 @@ export default {
       this.isLoading = false;
     });
   },
+  methods: {
+    onChange(movie) {
+      saveMovie(movie);
+    },
+  },
 };
 </script>