Refreshing recipes table after adding recipe

front/components/Recipes/AddRecipeModal.vue

@@ -155,6 +155,7 @@
                         .then(() => {
                             this.$Message.success('Sukces!');
                             this.active = false;
+                            this.$emit('recipe-added');
                             this.resetForm();
                         })
                         .catch(() => {

front/components/Recipes/SearchRecipe.vue

@@ -8,7 +8,7 @@
             <h2>Znalezione przepisy: {{ total }}</h2>
         </Row>
         <Row style="margin-bottom: 10px;">
-            <Table border :columns="columns" :data="recipes"></Table>
+            <Table border :columns="columns" :data="recipes" :loading="loading"></Table>
         </Row>
         <Row style="margin-bottom: 10px;">
             <Page :current.sync="current_page" :total="total" @on-change="getRecipes"/>
@@ -62,7 +62,7 @@
                 ],
                 debounceTimer: 0,
                 page: 0,
-                limit: 6,
+                limit: 10,
                 nextPage: true,
                 prevPage: false,
                 total: 0,
@@ -100,12 +100,13 @@
                 })
                     .then((response) => {
                         const data = response.data.data.recipes;
-                        this.recipes = this.recipes.concat(data.data);
+                        this.recipes = data.data;
                         this.total = data.total;
                         this.nextPage = data.next_page_url != null;
                         this.prevPage = data.prev_page_url != null;
                         this.last_page = data.data.last_page;
                         this.current_page = data.current_page;
+                        this.loading = false;
                     })
                     .catch((error) => {
                         console.log(error);
@@ -123,4 +124,4 @@
 
 <style scoped>
 
-</style>
+</style>

front/pages/recipes/index.vue

@@ -1,10 +1,10 @@
 <template>
     <div style="width: 100%">
         <Row type="flex" justify="center">
-            <AddRecipeModal style="margin-bottom: 20px"/>
+            <AddRecipeModal style="margin-bottom: 20px" @recipe-added="refreshRecipeTable"/>
         </Row>
         <Row type="flex" justify="center">
-            <SearchRecipe style="width: 80%"/>
+            <SearchRecipe ref="recipes" style="width: 80%"/>
         </Row>
     </div>
 </template>
@@ -19,6 +19,11 @@
         components: {
             AddRecipeModal,
             SearchRecipe
+        },
+        methods: {
+            refreshRecipeTable(){
+                this.$refs.recipes.getRecipes();
+            }
         }
     };
 </script>