Call api within the component itself & linting.

frontend/ui/Wines.vue

@@ -2,18 +2,18 @@
   <div v-if="wines.length > 0" class="wines-main-container">
     <div class="info-and-link">
       <h3>
-        Topp 5 viner
+        Topp viner
       </h3>
       <router-link to="viner">
         <span class="vin-link">Se alle viner </span>
       </router-link>
     </div>
-    <div class="wine-container">
+    <div class="wines-container">
       <Wine v-for="wine in wines" :key="wine" :wine="wine">
         <template v-slot:top>
           <div class="flex justify-end">
             <div class="requested-count cursor-pointer">
-              <span> {{ wine.occurences }} </span>
+              <span> {{ wine.occurences }} </span>
               <i class="icon icon--heart" />
             </div>
           </div>
@@ -35,15 +35,20 @@ export default {
     return {
       wines: [],
       clickedWine: null,
+      limit: 18
     };
   },
   async mounted() {
-    let response = await overallWineStatistics();
+    this.getAllWines();
+  },
+  methods: {
+    getAllWines() {
+      return fetch(`/api/wines?limit=${this.limit}`)
+        .then(resp => resp.json())
+        .then(response => {
+          let { wines, success } = response;
 
-    response.sort();
+          this.wines = wines.sort(
-    response = response
-      .filter(wine => wine.name != null && wine.name != "")
-      .sort(
             this.predicate(
               {
                 name: "occurences",
@@ -55,9 +60,8 @@ export default {
               }
             )
           );
-    this.wines = response.slice(0, 5);
+        });
     },
-  methods: {
     predicate: function() {
       var fields = [],
         n_fields = arguments.length,
@@ -125,7 +129,7 @@ export default {
 <style lang="scss" scoped>
 @import "@/styles/variables.scss";
 @import "@/styles/global.scss";
-@import "../styles/media-queries.scss";
+@import "@/styles/media-queries.scss";
 
 .wines-main-container {
   margin-bottom: 10em;