Bus für die Kommunikation der Komponenten erstellt und in die Suche eingebaut

orchive3-frontend/src/App.vue

@@ -12,6 +12,7 @@
     <div class="content">
       <!-- router-link zum detailView ist hier nur zum testen, muss beim mergen nicht übernommen werden -->
       <router-link to="/detailView">Detail </router-link>
+      <router-link to="/searchContext">| Search Context</router-link>
       <router-view/>
     </div>
   </div>

orchive3-frontend/src/components/SearchBar.vue

@@ -13,8 +13,8 @@
                 </button>
             </div>
             <!-- toDo: Die Searchleiste schließt noch nicht mit der Mülltonne und den Linien darunter am rechten Rand ab -->
-            <input class="searchTxt" type="text" name="query" placeholder="Search">
-            <!-- input class="searchTxt" type="text" name="query" v-model="searchQuery" placeholder="Search" @input="changeSearch" -->
+            <!--input class="searchTxt" type="text" name="query" placeholder="Search" -->
+            <input class="searchTxt" type="text" name="query" v-model="searchQuery" placeholder="Search" @input="changeSearch">
 
             <div class="filterContainer">
 
@@ -124,6 +124,26 @@
     </div>
 </template>
 
+<script>
+import { Bus } from '../main.js'
+
+export default {
+  data: function () {
+    return {
+      searchQuery: ''
+    }
+  },
+  created () {
+    this.changeSearch()
+  },
+  methods: {
+    changeSearch () {
+      Bus.$emit('searchChanged', this.searchQuery)
+    }
+  }
+}
+</script>
+
 <style>
 .searchBar{
     margin-left: 30px;

orchive3-frontend/src/main.js

@@ -4,6 +4,8 @@ import router from './router'
 
 Vue.config.productionTip = false
 
+export const Bus = new Vue()
+
 new Vue({
   router,
   render: h => h(App)

orchive3-frontend/src/router/index.js

@@ -22,6 +22,11 @@ const routes = [
     path: '/detailView',
     name: 'DetailView',
     component: () => import('../views/DetailView.vue')
+  },
+  {
+    path: '/searchContext',
+    name: 'SearchContextView',
+    component: () => import('../views/SearchContextView.vue')
   }
 ]
 

orchive3-frontend/src/views/SearchContextView.vue

+<template>
+  <div class="searchContext">
+    <h1>This is an search context page</h1>
+    <h2> {{searchItem}}</h2>
+  </div>
+</template>
+
+<script>
+import { Bus } from '../main.js'
+
+export default {
+  data: function () {
+    return {
+      searchItem: ''
+    }
+  },
+  created () {
+    Bus.$on('searchChanged', (searchQuery) => {
+      this.searchItem = searchQuery
+    })
+  }
+}
+</script>