SearchBar and SerachBar results

spa/src/components/Main.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="content-wrapper" :class="{ centered: isCentered }">
       <slot>
-        <SearchBar />
-        <SearchResults />
+        <SearchBar @submited="queryStr" />
+        <SearchResults ref="sdf" />
       </slot>
     </div>
   </template>
@@ -23,6 +23,29 @@
     components: {
         SearchBar,
         SearchResults
+    },
+    methods: {
+        queryStr(searchQuery) {
+            alert(this.$refs.sdf)
+            this.isCentered = false;
+            this.$refs.searchResultsRef.showContent = true;
+            this.$refs.searchResultsRef.results = [
+                {
+                    "id": "asldfjk",
+                    "title": "title1",
+                    "description": "long description about this result"
+                },
+                {
+                    "id": "asladsdfjk",
+                    "title": "title2",
+                    "description": "long description about this result" 
+                },{
+                    "id": "asldfasdfjk",
+                    "title": "title3",
+                    "description": "long description about this result"
+                }
+            ];
+        }
     }
   };
   </script>

spa/src/components/SearchBar.vue

@@ -20,7 +20,8 @@
     },
     methods: {
       onSubmit() {
-        this.$emit('submit', this.searchQuery);
+        this.$emit('submited', this.searchQuery);
+
       }
     }
   };

spa/src/components/SearchResults.vue

@@ -1,8 +1,7 @@
 <template>
-  <div class="search-results">
+  <div  v-show="showContent" class="search-results">
     <h2>Результаты поиска</h2>
-    <div v-if="results.length === 0">Нет результатов</div>
-    <div v-else class="results-container">
+    <div class="results-container">
       <SearchResultCard v-for="result in results" :key="result.id" :result="result" />
     </div>
   </div>
@@ -12,6 +11,11 @@
 import SearchResultCard from "./SearchResultCard.vue";
 
 export default {
+  data() {
+    return {
+      showContent: false,
+    };
+  },
   name: "SearchResults",
   components: {
     SearchResultCard,
@@ -23,6 +27,7 @@ export default {
     },
   },
 };
+
 </script>
 
 <style scoped>