VUE - 在 v-for 完成循环后调用一个函数

Question

这是我在v-for循环后调用方法的做法。它工作得很好，但我仍然想知道是否有比这更好的方法，或者 vue 是否提供类似 v-for 回调的方法。 父组件

<template>
    <loader-component v-show="show_loader" />
    <list-component @onRendered="hideLoader"/>
</template>

<script>
export default {
    components: {
        loaderComponent,
        listComponent
    },
    data() {
        return {
            show_loader: true
        }
    }
    methods: {
        hideLoader() {
            this.show_loader = false;
        }
    }
}
</script>

列表组件

<template>
    <item-component v-for="(item, key) in items" :isRendered="isRendered(key)" />
</template>

<script>
export default {
    prop: ['items'],
    methods: {
        isRendered(key) {
            let total_items = this.items.length - 1;
            if (key === total_items) {
                this.$emit('onRendered');
            }
        }
    }
}
</script>

Answer 1

我认为对 Vue 更新其响应式属性的确切方式存在误解。

我为您制作了一个小演示，希望它能解决问题。

https://codesandbox.io/s/prod-star-pzjhc

我还建议阅读 Vue 文档 computed properties

VUE - 在 v-for 完成循环后调用一个函数

VUE - Call a function after v-for has done looping

vue.js

v-for