每次调用 Vuejs 计算方法时添加一个加载器

Question

I have a filtering method which filters every time a checkbox is checked. I want to add a loader when I click on checkbox to filter then show the result from the method. What I have tried is shown below but the loader stays all the time

HTML

<div v-show="load" class="lds-dual-ring"></div> //loader
<div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-9" v-for="product in computedProducts">
    <img :src="product.photo.url" alt="" class="main_img">
    <p>{{ product.name }}</p> 
    <div class="hover">
        <p>{{ product.name }}</p>
        <a :href="product.document.url"><img src="img/pdf_icon_white.svg" alt=""></a>
        <p>Factsheet als PDF downloaden</p>
   </div>
</div>

JS

var app = new Vue({
    el:'#app',
    data: {
        load: false,

    },
computed:{
        filteredProducts(){
            setTimeout(() => this.load = true , 1000)
            if(!this.checkedCountries.length){
                return this.products
            }
            const filtered_products= this.products.filter( product => this.checkedCountries.includes(product.categories[0].name))
            if(this.checkedCountries.length && !filtered_products.length){
                this.message = "There are no products to show"
            }else{
                this.message = null
            }
            return filtered_products
        },
 computedProducts(){
            if(this.pages === 1){
                return this.filteredProducts
                 
            }else{
                const firstIndex = (this.page -1) * this.perPage
                const lastIndex = this.page * this.perPage
                window.scrollTo(0,0)
                
               return this.filteredProducts.slice(firstIndex,lastIndex)
                
            }
        },
}

Answer 1

template

 <div v-if="load" class="lds-dual-ring"></div>
 <div v-else>
    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-9" v-for="product in computedProducts">
        <img :src="product.photo.url" alt="" class="main_img">
    
            <p>{{ product.name }}</p> 
            <div class="hover">
                <p>{{ product.name }}</p>
                <a :href="product.document.url"><img src="img/pdf_icon_white.svg" alt=""></a>
                <p>Factsheet als PDF downloaden</p>
           </div>
        </div>
    </div>

add function to methods (part of code)

methods : {
    
    filteredProducts : function() {
    
    // some code
    
    this.load =  // true or // false
    
    }
 }