Improved actor scraping and display.

assets/components/header/search.vue

@@ -1,57 +1,64 @@
 <template>
-    <form
-        class="search"
-        @submit.prevent="search"
-    >
-        <input
-            ref="search"
-            v-model="query"
-            type="search"
-            class="search-input"
-            placeholder="Search..."
-        >
-        <button
-            type="submit"
-            class="search-button"
-        ><Icon
-            icon="search"
-        /></button>
-    </form>
+	<form
+		class="search"
+		@submit.prevent="search"
+	>
+		<input
+			ref="search"
+			v-model="query"
+			type="search"
+			class="search-input"
+			placeholder="Search..."
+		>
+		<button
+			type="submit"
+			class="search-button"
+		><Icon
+			icon="search"
+		/></button>
+	</form>
 </template>
 
 <script>
 async function search() {
-    this.$router.push({ name: 'search', query: { q: this.query } });
-    this.$emit('search');
+	this.$router.push({ name: 'search', query: { q: this.query } });
+	this.$emit('search');
 }
 
 function searching(to) {
-    if (to) {
-        setTimeout(() => {
-            // nextTick does not seem to work
-            this.$refs.search.focus();
-        }, 20);
-    }
+	if (to) {
+		setTimeout(() => {
+			// nextTick does not seem to work
+			this.$refs.search.focus();
+		}, 20);
+	}
+}
+
+function route(to) {
+	if (to.name !== 'search') {
+		this.query = null;
+	}
 }
 
 export default {
-    props: {
-        searching: {
-            type: Boolean,
-            default: false,
-        },
-    },
-    data() {
-        return {
-            query: this.$route.query ? this.$route.query.q : null,
-        };
-    },
-    watch: {
-        searching,
-    },
-    methods: {
-        search,
-    },
+	props: {
+		searching: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			query: this.$route.query ? this.$route.query.q : null,
+		};
+	},
+	watch: {
+		$route: route,
+		searching,
+	},
+	methods: {
+		search,
+	},
 };
 </script>