Use ref for search

Author: jmcooper

src/search/Search.vue

@@ -35,14 +35,13 @@
 </template>
 
 <script>
-import { ref, computed } from 'vue';
+import { computed } from 'vue';
 import useSearch from './useSearch';
 import useFilters from './useFilters';
 import usePagination from './usePagination';
 
 export default {
   setup(props) {
-    const searchTerm = ref('');
     const { searchResults, search } = useSearch(props.searchTerm);
 
     const {
@@ -64,7 +63,6 @@ export default {
     const resultCount = computed(() => filteredResults.value.length);
 
     return {
-      searchTerm,
       pagedResults,
       search,
       filters,

src/search/useFilters.js

@@ -1,7 +1,7 @@
-import { reactive, computed, onMounted } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 
-function filterResults(parts, filters) {
-  return parts.filter((part) => filters.every(
+function filterResults(results, filters) {
+  return results.value.filter((part) => filters.value.every(
     (filter) => {
       const filterField = Object.keys(filter)[0];
       const filterValue = filter[filterField];
@@ -11,10 +11,10 @@ function filterResults(parts, filters) {
 }
 
 export default function useFilters(searchResults) {
-  const filters = reactive([]);
+  const filters = ref([]);
 
-  const applyFilters = (filter) => filters.push(filter);
-  const clearFilters = () => filters.splice(0, filters.length);
+  const applyFilters = (filter) => filters.value.push(filter);
+  const clearFilters = () => { filters.value = []; };
 
   onMounted(() => console.log('Mounted: useFilters'));
 

src/search/useSearch.js

@@ -1,10 +1,10 @@
-import { reactive, onMounted } from 'vue';
+import { ref, onMounted } from 'vue';
 import parts from '../data/parts';
 
 const allParts = [...parts.heads, ...parts.arms, ...parts.torsos, ...parts.bases];
 
 export default function useSearch(originalSearchTerm) {
-  const results = reactive([]);
+  const results = ref([]);
 
   const searchInventory = (searchTerm) => {
     let searchResults;
@@ -17,7 +17,7 @@ export default function useSearch(originalSearchTerm) {
         (part) => part.title.toLowerCase().includes(lowerTerm),
       );
     }
-    results.splice(0, results.length, ...searchResults);
+    results.value = [...searchResults];
   };
 
   searchInventory(originalSearchTerm);