Работает поиск по проектам

src/views/Presentation/PresentationView.vue

@@ -57,6 +57,8 @@ export default {
   data() {
     return {
       projects: [],
+      searchQuery: '',
+      searchResult: [],
     };
   },
   async created() {
@@ -67,6 +69,16 @@ export default {
       console.error('There was an error fetching the projects', error);
     }
   },
+  methods: {
+    async search() {
+      try {
+        const response = await axios.get(`http://somebodyhire.me/api/search/projects/?search_query=${this.searchQuery}`);
+        this.searchResult = response.data;
+      } catch (error) {
+        console.error('There was an error performing the search', error);
+      }
+    }
+  },
 };
 </script>
 
@@ -100,23 +112,39 @@ export default {
              Находи вдохновение, коллег и новые знания.
             </p>
           </div>
+        </div>
+        <div>
+          <!-- Тут надо будет заменить на красивую строчку  -->
+    <input type="text" v-model="searchQuery" placeholder="Поиск по проектам и людям" />
+    <button type="submit" @click="search">Go</button>
+
+    <!-- Результаты поиска по проектам-->
+    <div v-if="searchResult.length > 0">
+    <h2>Найдено в проектах: {{ searchResult.length }}</h2>
+    <div v-for="project in searchResult" :key="project.id">
+      <h2>{{ project.title }}</h2>
+      <p>{{ project.description }}</p>
+    </div>
+  </div>
+  <div v-else>
+    <h1>No results found</h1>
+  </div>
   </div>
 
         <div class="container">
       <div class="row justify-space-between py-2">
+        <div>
     <div class="col-lg-4 mx-auto">
-          <MaterialInput
+      
-            class="input-group-dynamic mb-4"
+    </div>
-            icon="search"
+
-            type="text"
-            placeholder="Поиск по проектам или людям"
-          />
   </div>
       </div>
     </div>
       </div>
         
     </div>
+    
   </Header>
 
 
@@ -130,8 +158,8 @@ export default {
       <p>{{ project.description }}</p>
     </div>
   </div>   
-
   </div>
+
 <!-- 
     <div class="container">
       <div class="row">