tutorial code

Author: mattmaribojoc

Diff for: src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <img alt="Vue logo" src="./assets/logo.png" />
-  <HelloWorld msg="Hello Vue 3.0 + Vite" />
+  <HelloWorld />
 </template>
 
 <script>
@@ -13,3 +13,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+  img {
+    width: 5em;
+  }
+</style>

Diff for: src/components/HelloWorld.vue

@@ -6,7 +6,9 @@
       placeholder='Filter Search' 
       v-model='query'
     />
-     <search-results :query='query'/>
+    <br>
+    <button @click='reset'> Reset </button>
+    <search-results :query='query'/>
    </div>
 </template>
 
@@ -20,7 +22,12 @@
     setup () {
       const query = ref('')
 
+      const reset = (evt) => {
+        query.value = '' // clears the query
+      }
+      
       return {
+        reset,
         query
       }
     }

Diff for: src/components/SearchResults.vue

@@ -9,7 +9,7 @@
 	</div>
 </template>
 <script>
-import { ref, computed, onMounted } from 'vue'
+import { computed, onMounted } from 'vue'
 import titles from '../post-data.json'
 export default {
 	props: {
@@ -20,7 +20,7 @@ export default {
 		onMounted(() => {
 			console.log('mounted')
 		})
-		
+
 		const filteredTitles = computed(() => {
 			return titles.filter(s => s.Name.toLowerCase().includes(props.query.toLowerCase()))
 		})