I'm in the process of developing a website that heavily relies on Vue for managing the majority of the user interface. The centerpiece of the site is a dynamic video list component that gets updated whenever a specific URL pattern is detected.
The primary component, named video-list, has a structure similar to this:
let VideoList = Vue.component( 'video-list', {
data: () => ({ singlePost: '' }),
props: ['posts', 'categorySlug'],
template: `
<div>
<transition-group tag="ul">
<li v-for="(post, index) in filterPostsByCategory( posts )">
<div @click.prevent="showPost( post )">
<img :src="post.video_cover" />
/* ... */
</div>
</li>
</transition-group>
</div>`,
methods: {
orderPostsInCategory: function ( inputArray, currentCategory ) {
let outputArray = [];
for (let i = 0; i < inputArray.length; i++) {
let currentCategoryObj = inputArray[i].video_categories.find( (category) => {
return category.slug === currentCategory;
});
let positionInCategory = currentCategoryObj.category_post_order;
outputArray[positionInCategory] = inputArray[i];
}
return outputArray;
},
filterPostsByCategory: function ( posts ) {
let categorySlug = this.categorySlug,
filteredPosts = posts.filter( (post) => {
return post.video_categories.some( (category) => {
return category.slug === categorySlug;
})
});
return this.orderPostsInCategory( filteredPosts, categorySlug );
}
}
});
The filterPostsByCategory() method effectively handles switching between different categories and dynamically updating the video list based on the specified routes below:
let router = new VueRouter({
mode: 'history',
linkActiveClass: 'active',
routes: [
{ path: '/', component: VideoList, props: {categorySlug: 'home-page'} },
{ path: '/category/:categorySlug', component: VideoList, props: true }
]
});
I am currently facing a challenge with implementing transitions in the desired manner. My goal is to have all visible list items smoothly fade out when selecting a new category, followed by the new list items fading in. Despite reviewing the vue transitions documentation, I have yet to achieve the desired effect.
An issue arises with items that belong to multiple categories – during category switches, these items are not affected by transition effects, likely due to Vue optimizing updates to minimize node changes. Additionally, when two or more categories share the same list items, the enter and leave methods do not seem to trigger at all.
Hence, my query is how can I ensure that all current items are targeted, regardless of their visibility following route changes that match the aforementioned patterns?