From fbb2ec6eb1f0cc9016140ee095c21ab88b0ef742 Mon Sep 17 00:00:00 2001
From: Alex <alex.tyshang@gmail.com>
Date: Tue, 22 Mar 2022 21:23:23 +1300
Subject: [PATCH] fix: fixed issue #158

---
 NUXT/layouts/default.vue | 12 +++++++++++-
 NUXT/pages/search.vue    | 26 +++++++++++++++++++++-----
 2 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/NUXT/layouts/default.vue b/NUXT/layouts/default.vue
index 2cf2717..b16dbc9 100644
--- a/NUXT/layouts/default.vue
+++ b/NUXT/layouts/default.vue
@@ -42,7 +42,11 @@
       >
         <div class="scroll-y" style="height: 100%">
           <div v-if="search" style="min-width: 180px">
-            <v-list-item v-for="(item, index) in response" :key="index" class="px-0">
+            <v-list-item
+              v-for="(item, index) in response"
+              :key="index"
+              class="px-0"
+            >
               <v-btn
                 text
                 tile
@@ -100,6 +104,7 @@ div {
 <script>
 import { App as CapacitorApp } from "@capacitor/app";
 import { mapState } from "vuex";
+import constants from "../plugins/constants";
 export default {
   data: () => ({
     search: false,
@@ -154,6 +159,11 @@ export default {
     searchBtn(text) {
       const query = text;
 
+      this.$logger(
+        constants.LOGGER_NAMES.search,
+        "Query: " + query + " this.search: " + this.search
+      );
+
       if (this.search === true) {
         if (query) {
           this.$router.push(`/search?q=${query}`);
diff --git a/NUXT/pages/search.vue b/NUXT/pages/search.vue
index 0b69f19..1c915c7 100644
--- a/NUXT/pages/search.vue
+++ b/NUXT/pages/search.vue
@@ -46,11 +46,27 @@ export default {
     };
   },
   mounted() {
-    const searchQuestion = this.$route.query.q;
-    const vm = this;
-    this.$youtube.search(searchQuestion, (data) => {
-      vm.videos = data;
-    });
+    getSearch();
+  },
+  methods: {
+    getSearch() {
+      const searchQuestion = this.$route.query.q;
+      const vm = this;
+      this.$youtube.search(searchQuestion, (data) => {
+        vm.videos = data;
+      });
+    },
+  },
+  watch: {
+    // Watches for new searches while the current search page is active.
+    $route: {
+      deep: true,
+      handler(newSearch, oldSearch) {
+        if (newSearch.query.q != oldSearch.query.q) {
+          this.getSearch();
+        }
+      },
+    },
   },
 };
 </script>