Why is my search not working?

Hi guys,

My search is no longer working and it was working when I had the form and search logic in my dashboard.vue. Then I turned my search into a component and import it into my dashbboard.vue but it doesn’t work anymore. I would appreciate any help. Thanks in advance.

I added some console.logs and this is what I see In the console: I see “computing Searchresults”, searchInput is empty, and Items contains all my items not a filtered array based off of searchInput. I see in the Vue devtools that searchInput isn’t being filled with what I type in the search bar and searchResults is the same as my Items array.

EDIT: I also just realized I used .length on searchInput in the Dashboard.vue and would have to change that since I am looking at a string not an array.

Dashboard

<script setup>
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
import { Head } from "@inertiajs/vue3";
import { ref, onMounted, computed } from "vue";
import Index from "@/Pages/Decks/Index.vue";
import SuccessToast from "@/Components/SuccessToast.vue";
import SearchBar from "@/Components/SearchBar.vue";

const { decks, groups } = defineProps(["decks", "groups"]);
const items = ref([]);
const searchInput = ref("");

onMounted(async () => {
    let currentDecks = decks.filter(
        (deck) => !groups.some((group) => group.id === deck.group_id)
    );

    items.value = [
        ...currentDecks.map((deck) => ({ ...deck, type: "deck" })),
        ...groups.map((group) => ({ ...group, type: "group" })),
    ];
});

const handleSearch = (input) => {
    console.log("Search input:", input);
    searchInput.value = input;
};

const searchResults = computed(() => {
    console.log("Computing searchResults...");
    console.log("Search input:", searchInput.value);
    console.log("Items:", items.value);

    return items.value.filter((item) => {
        return item.title
            .toLowerCase()
            .includes(searchInput.value.toLowerCase());
    });
});
</script>

<template>
    <Head title="Dashboard" />

    <AuthenticatedLayout>
        <template #header>
            <div class="flex justify-between items-center">
                <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                    Dashboard
                </h2>
                <div class="md:w-80">
                    <SearchBar @search="handleSearch" />
                </div>
            </div>
        </template>

        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6 text-gray-900">You're logged in!</div>
                </div>
            </div>
        </div>
        <SuccessToast
            v-if="$page.props.flash.success"
            :message="$page.props.flash.success"
        />
        <div v-if="searchInput.length > 0">
            <Index v-for="item in searchResults" :key="item.id" :item="item" />
        </div>
        <div v-else>
            <div
                class="mt-6 flex flex-row flex-wrap justify-center items-center gap-4"
            >
                <Index v-for="item in items" :key="item.id" :item="item" />
            </div>
        </div>
    </AuthenticatedLayout>
</template>

SearchBar

<script setup>
import { ref } from "vue";

const emit = defineEmits(["search"]);

const searchInput = ref("");

const submitForm = () => {
    console.log("Submitting form with input:", searchInput.value);
    emit("search", searchInput.value);
};
</script>

<template>
    <form @submit.prevent="submitForm" class="max-w-lg mx-auto">
        <label
            for="default-search"
            class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white"
            >Search</label
        >
        <div class="relative">
            <div
                class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none"
            >
                <svg
                    class="w-4 h-4 text-gray-500 dark:text-gray-400"
                    aria-hidden="true"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 20 20"
                >
                    <path
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
                    />
                </svg>
            </div>
            <input
                type="search"
                id="default-search"
                v-model="searchInput"
                class="block w-full p-4 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                required
            />
            <button
                type="submit"
                class="text-white absolute end-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
            >
                Search
            </button>
        </div>
    </form>
</template>
  • this is what is smoking gun here!! good job debugging this :slight_smile:
  • how are you passing “seachInput” tokens there? get hold of that in your custom component and it should be good after that

happy coding :slight_smile:

I pass the function handleSearch like this ```

<SearchBar @search=“handleSearch” />

searchInput is in both my dashboard and search component. I’m not sure where I am going wrong.

My question was answered over at Laracasts. I needed to do the below:

https://laracasts.com/discuss/channels/vue/why-is-my-serach-no-longer-working-after-turning-my-search-bar-into-a-component?page=1&replyId=932080

 <input
                type="search"
                id="default-search"
                v-model="searchInput"
				@input="submitForm"
                class="block w-full p-4 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                required
            />
1 Like