finish genre

frontend/src/components/MovieType.vue

 <template>
 <div class="box">
 <h1>Genre</h1>
-<li v-for="genre in genres" :key="genre.id">
+<div class="liste-genre">
+<li v-for="genre in genres" :key="genre.id" style="list-style-type:none;">
 <div class="check">
 <input type="checkbox" id="genre.id" value="genre" >
 <label for="genre"> {{ genre.name }} </label>
 </div>
-<br>
 </li>
 </div>
+</div>
 </template>
 
 <script>
@@ -16,6 +17,13 @@ import axios from "axios";
 const backendURL = process.env.VUE_APP_BACKEND_BASE_URL;
 
 export default {
+    data: function () {
+    return {
+      genrename: "",
+      genres: [],
+      genresLoadingError: "",
+    };
+  },
     methods: {
         fetchGenres: function () {
       axios

frontend/src/views/Home.vue

@@ -74,15 +74,31 @@ export default {
         )
         .then((response) => {
           this.movies = response.data;
+          console.log(response.data)
         })
         .catch((error) => {
           this.moviesLoadingError = "An error occured while e ing movies.";
           console.error(error);
         });
+    },
+            fetchGenres: function () {
+      axios
+        .get(
+           backendURL + "/genres",
+        )
+        .then((response) => {
+          this.genres = response.data;
+          console.log(response.data)
+        })
+        .catch((error) => {
+          this.genresLoadingError = "An error occured while e ing genres.";
+          console.error(error);
+        });
     },
   },
   created() {
     this.fetchMovies();
+    this.fetchGenres();
   },
 };
 </script>