javascript - 当 Vue.js 发生更改时，如何定位列表中的所有项目？

Question

我正在构建一个使用 Vue 来支持大部分 UI 的网站。主要组件是一个视频列表，只要匹配某个 URL 模式，该列表就会更新。

主要(video-list)组件看起来大致如下:

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 );
        }
    }
});

filterPostsByCategory() 方法根据以下路线在各种可能的类别之间切换，并立即更新列表:

let router = new VueRouter({
    mode: 'history',
    linkActiveClass: 'active',
    routes: [
        { path: '/', component: VideoList, props: {categorySlug: 'home-page'} },
        { path: '/category/:categorySlug', component: VideoList, props: true }
    ]
});

我遇到的困难是以我想要的方式转换列表。理想情况下，当选择新类别时，所有当前可见的列表项都会淡出，然后新的列表项会淡入。我查看了 vue transitions documentation ，但一直没能达到我想要的效果。

问题是有些项目有多个类别，当在这些类别之间切换时，这些项目永远不会受到我尝试应用的任何转换的影响(我假设是因为 Vue 只是试图提高效率并更新尽可能少的节点)尽可能)。两个或多个类别也可能包含完全相同的列表项，在这些情况下，输入和离开方法似乎根本不会触发。

所以问题是，当上面的路线模式匹配时，有什么好方法可以确保我可以定位所有当前项目(无论它们在路线更改后是否仍然可见)？

Answer 1

您是否注意到 documentation 中的特殊 key 属性？

Vue.js 非常注重性能，因此，当您修改 v-for 使用的列表时，vue 会尝试更新尽可能少的 DOM 节点。有时，它仅更新节点的文本内容，而不是删除整个节点，然后附加新创建的节点。使用 :key 你告诉 vue 这个节点与给定的 key/id 特别相关，并且当列表/数组被修改时你强制 vue 完全更新 DOM，从而改变 key 。在您的情况下，适合将 key 属性绑定(bind)到与帖子和类别过滤器本身相关的一些信息，这样每当修改列表或更改类别时，整个列表都可能会重新呈现，从而将动画应用于所有项目:

<li v-for="(post, index) in filterPostsByCategory( posts )" :key="post.id + categorySlug">
    <div @click.prevent="showPost( post )">
        <img :src="post.video_cover" />
        /* ... */
    </div>
</li>