Vue：请求进行中时显示加载程序

Question

我要实施以下流程：

当http请求正在进行时，显示加载程序。请求完成后，隐藏加载程序。

Answer 1

我不确定我是否理解您，但是我假设是这样。当http请求正在进行时，您需要一个加载程序。因此，我将展示逻辑。希望理解

<template>

    <div>

        <div v-if="loading">
            <!-- here put a spinner or whatever you want to do when request is on proccess -->
        </div>

        <div v-if="!loading">
            <!-- here is your application code -->
        </div>

    </div>

</template>

<script>
    import axios from 'axios'
    export default {
        data() {
            return {
                loading: false
            }
        },
        methods: {
            makeRequest () {
                this.loading = true //the loading begin
                axios.get('/example')
                .then(response => {
                    this.loading = false //the loading stop when the response given from server
                    //do whatever with response
                })
                .catch(error => {
                    this.loading = false
                    //do whatever with response
                })
            }
        }
    }
</script>

希望您能理解。有关信息，用于发送http请求，我正在使用axios，并且在两种情况下我都使用v-if，但是在第二个div中，您可以使用v-else