Всех приветствую , у меня есть проблема , не могу никак написать блок фильтрации по датам , показанный на фото , необходимо чтобы изначально происходила фильтрация по месяцу , а уже потом по датам , прошу более опытных разработчиков объяснить мне алгоритм действий данного блока , как его создать?Ну и если можно предоставить computed свойства для фильтрации подобных блоков.На данный момент у меня есть родитель и дочерний элемент с датами.
Родитель:
<template>
<div class="glavA">
<div class="hWord">
<img src="../assets/Icon button.svg" />
<h2 style="font-weight: 700; font-size: 28px; opacity: 0.75; margin-left: 20%;">Афиша</h2>
</div>
<div>
<select v-model="selectedData">
<option v-for="data in sortData">{{ data.name }}</option>
</select>
<sortedDate v-model="sortDataD" :dataDay="data" @sendDay="sendDay2"/>
</div>
<div class="data">
<div class="filters">
<myFilters v-model="selectedSort" :options="sortOptions"/>
<SearchAfisha v-model="searchQuery"/>
</div>
</div>
<afishaList style="margin-top: 30px;" :posts="sortedAndSearchedPosts"/>
<div class="pages__afisha">
<div v-for="pageN in totalPages" :key="pageN">
{{ page }}
</div>
</div>
</div>
</template>
<script>
import SpisokMonth from '@/components/UI/SpisokMonth.vue';
import myFilters from '@/components/UI/myFilters.vue';
import SearchAfisha from '@/components/UI/SearchAfisha.vue';
import afishaList from '@/components/UI/afishaList.vue';
import buyButton from '@/components/UI/buyButton.vue';
import sortedDate from '@/components/UI/sortedDate.vue';
export default {
components: {
SpisokMonth, myFilters, SearchAfisha, afishaList, buyButton, sortedDate
},
data() {
return {
posts: [
{ title: 'Привет сережа', data: '10', month: 'Май' , years: '2023' , age: '11+', type: 'Мастер-класс', card: 'Пушкинская карта' , id:1 },
{ title: 'Привет АВитя', data: '14', month: 'Май', years: '2023', age: '12+', type: 'Мастер-класс', card: 'Пушкинская карта' , id:2 },
{ title: 'Привет Маша', data: '12', month: 'Май', years: '2023', age: '13+', type: 'Мастер-класс', card: 'Пушкинская карта' , id: 3 },
{ title: 'Не только джаз на пруду', data: '13', month: 'Май', years: '2023', age: '14+', type: 'Мастер-класс', card: 'Пушкинская карта' , id: 4 },
{ title: 'Не только джаз на пруду', data: '15', month: 'Май', years: '2023', age: '15+', type: 'ЦМастер-класс', card: 'Пушкинская карта' , id: 5 },
{ title: 'Не только джаз на пруду', data: '29', month: 'Май', years: '2023', age: '21+', type: 'ЖМастер-класс', card: 'Пушкинская карта Да' , id: 6 },
{ title: 'Не только джаз на пруду', data: '10', month: 'Май', years: '2023', age: '40+', type: 'КМастер-класс', card: 'Пушкинская карта Нет' , id: 7 },
{ title: 'Не только джаз на пруду', data: '10', month: 'Август', years: '2023', age: '10+', type: 'Мастер-класс', card: 'Пушкинская карта Да' , id: 8 },
{ title: 'Не только джаз на пруду', data: '10', month: 'Май', years: '2023', age: '16+', type: 'Мастер-класс', card: 'Пушкинская карта Нет' , id: 9 },
{ title: 'Не только джаз на пруду', data: '10', month: 'Май', years: '2023', age: '18+', type: 'Мастер-класс', card: 'Пушкинская карта' , id: 10 },
{ title: 'А Не только джаз на пруду', data: '10', month: 'Май', years: '2023', age: '17+', type: 'ВМастер-класс', card: 'Пушкинская карта' , id: 11 },
{ title: 'А Не только джаз на пруду', data: '10', month: 'Май', years: '2023', age: '17+', type: 'АМастер-класс', card: 'Пушкинская карта' , id: 12 },
],
selectedSort: '',
sortOptions: [
{value: 'type' , name: 'По формату' , id:1},
{value: 'age' , name: 'По возрасту' , id:3},
{value: 'card' , name: 'Пушкинская карта' , id:4},
],
selectedData: '',
sortDataD: '',
sortData: [
{ value: 'month', name: 'Май', id: 1 },
{ value: 'month', name: 'Июнь', id: 2 },
{ value: 'month', name: 'Август', id: 3 }
],
data: [
{ day: 'ПТ', dates: '1' },
{ day: 'ПТ', dates: '2' },
{ day: 'ПТ', dates: '3' },
{ day: 'ПТ', dates: '4' },
{ day: 'ПТ', dates: '5' },
{ day: 'ПТ', dates: '6' },
{ day: 'ПТ', dates: '6' },
{ day: 'ПТ', dates: '6' },
{ day: 'ПТ', dates: '6' },
{ day: 'ПТ', dates: '6' },
{ day: 'ПТ', dates: '6' },
{ day: 'ПТ', dates: '6' },
{ day: 'ПТ', dates: '6' },
{ day: 'ПТ', dates: '6' },
{ day: 'ПТ', dates: '6' },
{ day: 'ПТ', dates: '6' },
],
searchQuery: '',
page: 1,
totalPages: 0,
limit: 6,
}
},
computed: {
sortedPosts() {
return [...this.posts].sort((post1, post2) => {
return post1[this.selectedSort]?.localeCompare(post2[this.selectedSort])
})
},
sortedAndSearchedPosts() {
return this.sortedPosts.filter(post => post.title.toLowerCase().includes(this.searchQuery.toLowerCase()))
},
},
}
Ребенок:
<template>
<div class="dates__container" >
<div v-for="dataN in dataDay" class="dates__content">
<input :id="dataN.dates" class="input__data" type="checkbox" />
<label :value="modelValue" @change="changeData" class="label_data" :for="dataN.dates"> {{ dataN.day }} {{ dataN.dates }} </label>
</div>
</div>
</template>
<script>
export default {
props: {
modelValue: {
type: String
},
dataDay: {
type: Array,
default: () => []
}
},
data() {
return {
}
},
methods: {
changeData(event) {
this.$emit('update:modelValue', event.target.value)
},
}
}
</script>
Обращу внимание , что в родителе два уже написанных computed свойства написаны для других фильтров.
Простой
