Как сделать так, чтобы строка поиска заработала?
Как не кручусь, все равно у меня выводится все как надо, но строка не работает, при этом ошибок тоже нет. Как быть?
У меня на странице 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>
я его перенес не полностью, но нужная часть здесь.