javascript - Vue中的强制重新渲染

Question

我有 v-for

        <transition-group
            name="cc"
            tag="div"
            v-masonry
            item-selector=".grid-item"
            column-width=".grid-sizer"
            gutter=".gutter-sizer"
            horizontal-order="true"
            transition-duration="0"
            stagger="0">
        <div class="grid-sizer" :key="-1"></div>
        <div class="gutter-sizer" :key="-2"></div>
        <div v-masonry-tile class="grid-item" v-for="(img, index) in filteredImages" :key="img.id">
            <article v-if="img.type === 2" v-html="img.text">
            </article>
            <a v-if="img.type === 1" @click="startGallery(index, $event)">
                <img-lazy :width="img.width" :height="img.height" :source="'/images/items/' + img.src"
                          :data-index="index" ref="thumbnails"></img-lazy>
            </a>
        </div>
    </transition-group>

我用道具中给定的类别过滤数组

            filteredImages: function () {
            return this.category === -1 ? this.images : this.images.filter(i => i.category_id === this.category)
        }

但是在将类别道具从 -1（所有类别）更改为 2（例如）后，category_id 等于 2 的项目不会重绘，动画也不会应用。

你能帮助我吗？

标签： javascripthtmlvue.js