front, genre etc

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();
   },
 };