From 037857cd51694f6547621cf05057601e7dfb141d Mon Sep 17 00:00:00 2001
From: Kevin Midboe <kevin.midboe@gmail.com>
Date: Sat, 27 Aug 2022 11:51:16 +0200
Subject: [PATCH] On every route change, update local variables from query
 params

---
 src/pages/SearchPage.vue | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/pages/SearchPage.vue b/src/pages/SearchPage.vue
index c870fae..6b7481d 100644
--- a/src/pages/SearchPage.vue
+++ b/src/pages/SearchPage.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, computed } from "vue";
+  import { ref, computed, watch } from "vue";
   import { useRoute, useRouter } from "vue-router";
 
   import ResultsSection from "@/components/ResultsSection.vue";
@@ -45,12 +45,14 @@
 
   const title = computed(() => `Search results: ${query.value}`);
 
-  const urlQuery = route.query;
-  if (urlQuery && urlQuery?.query) {
-    query.value = decodeURIComponent(urlQuery?.query?.toString());
-    page.value = Number(urlQuery?.page) || 1;
-    adult.value = Boolean(urlQuery?.adult) || adult.value;
-    mediaType.value = (urlQuery?.media_type as MediaTypes) || mediaType.value;
+  function readQueryParams() {
+    const urlQuery = route.query;
+    if (urlQuery && urlQuery?.query) {
+      query.value = decodeURIComponent(urlQuery?.query?.toString());
+      page.value = Number(urlQuery?.page) || 1;
+      adult.value = Boolean(urlQuery?.adult) || adult.value;
+      mediaType.value = (urlQuery?.media_type as MediaTypes) || mediaType.value;
+    }
   }
 
   const search = (
@@ -73,6 +75,12 @@
   function toggleChanged() {
     updateQueryParams();
   }
+
+  readQueryParams();
+  watch(
+    () => route.fullPath,
+    () => readQueryParams()
+  );
 </script>
 
 <style lang="scss" scoped>