add genre

frontend/src/components/MovieType.vue

@@ -3,8 +3,8 @@
 <h1>Genre</h1>
 <li v-for="genre in genres" :key="genre.id">
 <div class="check">
-<input type="checkbox" id="action" value="Action" v-model="genre">
-<label for="Action">{{ }}</label>
+<input type="checkbox" id="genre.id" value="genre" >
+<label for="genre">{{ genre.name }}</label>
 </div>
 <br>
 </li>
@@ -12,12 +12,15 @@
 </template>
 
 <script>
+import axios from "axios";
+const backendURL = process.env.VUE_APP_BACKEND_BASE_URL;
+
 export default {
     methods: {
         fetchGenres: function () {
       axios
         .get(
-           backendURL + "/genres/",
+           backendURL + "/genres",
         )
         .then((response) => {
           this.genres = response.data;
@@ -29,7 +32,6 @@ export default {
     },
   },
   created() {
-    this.fetchMovies();
     this.fetchGenres();
   },
 };

frontend/src/views/Home.vue

@@ -28,11 +28,13 @@
         <h5> {{ movie.title }}</h5>
       </p>
       <p class="film">
+        <router-link :to="'/movie/'+ movie.id">
         <img
           :src="'https://image.tmdb.org/t/p/original/' + movie.poster_path"
           withd="100"
           height="300"
         />
+        </router-link>
       </p>
     </li>
     </div>