A
A
Alexander2019-06-24 04:05:51
Vue.js
Alexander, 2019-06-24 04:05:51

Vue, transition-group is it possible to assign a component as a wrapper?

I'm using the VueAwesomeSwiper component for the sliders.
But there was such a problem that I need to use transition-group to animate the filtering of blocks inside this slider.
And due to the fact that the transition-group creates its own wrapper in the slider, there is only 1 slide, just this wrapper.
The question itself is, is it possible to assign a swiper component to the wrapper?

<swiper :options="projectSwiperOption">
                     <transition-group name="animate-filter-grid" tag="div" class="all-projects__grid" > 
                        <swiper-slide class="all-projects__item " :class="'all-projects__item_'+project.widthClass" v-for="project in projectFiltered" :key="project.id" >
                            <div class="all-projects__item-wrapper">
                                <div class="all-projects__item-bg">
                                   <img :src="project.img" :alt="project.title">
                                </div>
                                <div class="all-projects__item-content">
                                    <div class="all-projects__item-title" v-html="project.title"></div>
                                    <div class="all-projects__item-description" v-html="project.description"></div>
                                    <div class="all-projects__item-zoom">
                                       <img src="img/projects/zoom.svg" alt="">
                                    </div>                           
                                </div>
                                <div class="all-projects__tags">
                                    <div class="all-projects__tags-item" v-for="tag in project.tags">
                                        {{tag.title}}
                                    </div>                      
                                </div>
                            </div>    
                        </swiper-slide>
                        </transition-group>
                    </swiper>

The above code will turn into (schematically)
<div class="swiper">
   <div class="all-projects__grid">
         ....слайды
   </div>
</div>

Because of this, as I wrote above, problems begin with sliders (
If you assign a component as a wrapper for transition-group, there is no way, tell me, has anyone come across this?
js component

Vue.component('project-item', {
    props: ['filter_word'],
    data: function () {
        return {
            projects: [
                {
                    id: 0,
                    show: true,
                    title: 'Тест',
                    description: 'Lorem ipsum',
                    img: 'img/projects/item_medium.png',
                    widthClass: 'medium',
                    tags: [
                        {
                            id: 1,
                            title: 'Веб'
                        },
                        {
                            id: 3,
                            title: 'Полиграфия'
                        }
                    ]
                }
            ],
            projectSwiperOption: {
                slidesPerView: 'auto',
                spaceBetween: 30,
                freeMode: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                    renderBullet(index, className) {
                        return `<span class="${className} swiper-pagination-bullet-custom"></span>`
                    }
                }
            }
        }
    },
    computed: {
        projectFiltered: function () {
            let projects = this.projects;
            if (this.filter_word !== 'Все') {
                projects = projects.filter(project => {
                    return project.tags.filter(tagItem => {
                        return tagItem.title.indexOf(this.filter_word) > -1;
                    }).length
                });
            }
            return projects
        }
    }

});

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question