Vue - 重新渲染数据时加载div

Question

我正在使用v-for和函数进行列表组件。每次我更改过滤器时，它都会重新呈现列表。我每次更改时都会加载一个div来加载消息，但我不确定如何处理它。

这是一个未完成的代码，但您更容易阅读：

<template>
    <div>
        <Filters 
        :country-selected="countrySelected" :countries="countries" 
        @updateCountry="countrySelected = $event"
        ></Filters>

        <section class="teams container-wrapper">
            <!-- Loading Placeholder -->
            <div class="loading-msg" :class="{'is-open': loading}">
                <p>Loading...</p>
            </div>
            <!-- List -->
            <div class="teams-list" :class="{'is-loading': loading}">
                <team-list class="teams"
                    v-for="(team, index) in loadingTeams()" :key="index"
                    :lorem=team.lorem
                ></team-list>
            </div>
        </section>
    </div>
</template>

<script>
export default {
    data() {
        return {
            teams: json.teams,
            countries: json.countries,
            countrySelected: "",

            teamList: undefined, //to watch
            loading: true //variable to toggle
        }
    },


    watch: {
        teamList: function() {
            this.loading = true // => THIS LINE EXECUTES AN INFINTE LOOP
            setTimeout(() => this.loading = false, 1000)
        }
    },

    methods: {
        teamFilters: function() {
            return this.teams.filter(
                team => team.country = this.countrySelected
            )
        },

        loadingTeams: function() {
            this.teamList = this.teamFilters()
            return this.teamFilters()
        }
    }
}
</script>

<style>
.is-open {
    opacity: 1;
}

.is-loading {
    opacity: 0;
}
</style>

可能有一种简单的方法可以处理列表更新和toogle加载div（我想知道你的意见），但我并没有理解为什么观察'teamList'中的函数正在进行无限循环。它应该工作，对吗？