Как сделать так, чтобы строка поиска заработала?

Как не кручусь, все равно у меня выводится все как надо, но строка не работает, при этом ошибок тоже нет. Как быть?

У меня на странице 3 свайпера и в каждом выводится свои статусы фильмов(сейчас в кино, скоро и по пушкинской карте), но поиск не работает, чтобы я не написал. Может кто сообразит как...

В оригинале при вводе текста в поисковую строку в каждом из 3х Films должны удаляться карточки с тем названием, которые не соответствуют тексту введенному в поисковую строку.

Если не получится решить, то хотябы предложите альтернативу как это можно сделать еще...

У меня уже от этого крыша едет.

Основной компонент, куда я импортирую другие:

<script setup>
import { onMounted, ref, computed } from 'vue';
import Hea from '../components/header.vue'
import Hero from '../components/hero.vue'
import Search from '../components/search.vue'
import Films from '../components/films.vue'
import Loader from '../components/loader.vue'
import Foo from '../components/footer.vue'
import { getFirestore, collection, getDocs } from 'firebase/firestore'
import { filmsRef } from '../firebase';

const movies = ref([]);

const fetchMovies = async () => {
    try {
        const querySnapshot = await getDocs(filmsRef);
        const moviesData = querySnapshot.docs.map(doc => ({
            link: doc.data().title,
            imgUrl: doc.data().img,
            imgAlt: doc.data().alt,
            status: doc.data().status,
        }));
        movies.value = moviesData;
        console.log(moviesData);
        loader.value = false;
    } catch (error) {
        console.error('Error fetching movies:', error);
    }
};

onMounted(fetchMovies);

const loader = ref(true);
const searchQueryHome = ref('');
const currentMovies = computed(() => movies.value.filter(movie => movie.status.includes('Сейчас в кино')));
const upcomingMovies = computed(() => movies.value.filter(movie => movie.status.includes('Скоро в кино')));
const pushkinMovies = computed(() => movies.value.filter(movie => movie.status.includes('Пушкинская карта')));

const filteredMovies = (moviesList) => {
    return moviesList.filter(movie => movie.link && movie.link.toLowerCase().includes(searchQueryHome.value.toLowerCase()));
};

</script>
<template>
    <div>
        <header class=" header">
            <Hea />
        </header>
        <main class="main">
            <Hero :slides="heroSlides" />
            <section class="search">
                <Search />
            </section>
            <Loader v-show="loader" />
            <section class="films" v-show="!loader">
                <div class="container films__container">
                    <Films :films="filteredMovies(currentMovies)" title="Сегодня в кино" />
                    <p class="films__not-found" v-if="currentMovies.length === 0">Фильмы не найдены</p>
                    <Films :films="filteredMovies(upcomingMovies)" title="Скоро в кино" />
                    <p class="films__not-found" v-if="upcomingMovies.length === 0">Фильмы не найдены</p>
                    <Films :films="filteredMovies(pushkinMovies)" title="Пушкинская карта" />
                    <p class="films__not-found" v-if="pushkinMovies.length === 0">Фильмы не найдены</p>
                </div>
            </section>
        </main>
        <footer class="footer">
            <Foo />
        </footer>
    </div>
</template>

И вот сам компонент с поисковой строкой:

<script setup>
import { ref } from 'vue';
defineProps({
    title: String,
})
const searchQuery = ref('');

</script>
<template>
    <div class="container search__container">
        <div class="search__top">
            <h1 class="search__title">Поиск По Сайту</h1>
            <div class="search__content">
                <input v-model="searchQueryHome" @input="filterMovies" class="search__input input-reset" type="text"
                    name="search" placeholder="Поиск...">
                <img src="../../img/search-svg.svg" alt="лупа" width="17" height="18">
            </div>
        </div>

я его перенес не полностью, но нужная часть здесь.


Ответы (0 шт):