Как сделать фильтр видео по тегам битрикс?

Question

[Kirill]

Стоит задача сделать фильтр в видео галерее по тегам, чтобы можно было фильтровать как товары но только вместо товаров будет видео, не могу найти подходящий компонент для данной задачи во Vue, нужен совет)

Answer 1

[Илья]

Не можете найти - пишите сами:

Спойлер

<template>
    <div>
        <div class='tags'>
            <a v-for="item in tags" @click.prevent="activeTagId = item.id">{item.name}</a>
        </div>
        <div class="videos">
            <div v-for="item in videos" v-show="isViewVideo(item)">...</div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            activeTagId: null,
            tags: [
                {
                    id: 1,
                    name: '',
                },
            ],
            videos: [
                {
                    id: 1,
                    name: '',
                    tagIds: [1,2,3],
                },
            ],
        };
    },
    methods: {
        isViewVideo(video) {
            return video.tagIds && video.tagIds.indexOf(this.activeTagId) >= 0;
        },
    },
}
</script>

Comments

[Kirill]

Спасибо за совет) попробую применить на сайте)

[Илья]

Kirill, там помимо совета еще и код под спойлером. Ну так, на всякий)

[Kirill]

Илья, ))) это то понятно) спасибо за уточнение) думаю на этой недели покажу реализацию)

[Алексей]

Илья, ещё забыл добавить кусочек в computed с фильтрацией videos по тегам)

[Kirill]

Алексей, Добавим) Спасибо за уточнение ! )

[Илья]

Алексей, в данной ситуации лучше v-show использовать, чтобы дерево DOM не перестраивать постоянно при фильтрации.