Answer the question
In order to leave comments, you need to log in
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>
<div class="swiper">
<div class="all-projects__grid">
....слайды
</div>
</div>
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 questionAsk a Question
731 491 924 answers to any question