如何在Vue中配合ES6 Async实现v-if加载状态控制

以下为对应的模板代码及实现方案，经实际验证有效，本次分享侧重实操而非理论讲解。

你现有代码不生效的核心原因是缺少loading状态的定义和状态切换逻辑，只需做两处修改即可适配：

• 在data中声明loading变量，初始值设为true，页面初始化时默认展示加载动画
• 在async异步方法中包裹逻辑，异步流程结束后将loading置为false，推荐用try...finally包裹，避免接口异常后加载动画一直展示

完整可运行代码如下：

<template>
<div class="container-fluid">
    <v-col
        md="6"
        offset-md="3"
        v-if="loading"
        justify="center">
        <v-progress-circular
        :size="50"
        color="blue"
        indeterminate
        >
        </v-progress-circular>
</v-col>
        <div v-else class="row">
            <main role="main" class="col-md-12 ml-sm-auto col-lg-12 pt-3 px-4">
                <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 ">
                    <h2>Learning loading with async</h2>
        </div>
      </main>
    </div>
  </div>
</template>

<script>
import Row from '@/components/Row.vue';
const { GoogleSpreadsheet } = require('google-spreadsheet');
const creds = require('@/client_secret.json');
    export default {
        name: "Sheet",
        components: {
            Row
        },
        props: ["sheet"],
        data() {
            return {
                rows: [], // 业务数据存储字段
                loading: true // 新增加载状态控制字段
            }
        },
        methods:{
            async accessSpreadSheet() {
                try {
                    const doc = new GoogleSpreadsheet('blahblahblah');
                    await doc.useServiceAccountAuth(creds);
                    await doc.loadInfo();
                    const sheet = doc.sheetsByIndex[0];
                    const rows = await sheet.getRows({
                        offset: 1
                    })
                    this.rows = rows;
                } finally {
                    // 异步逻辑走完，无论成功失败都关闭加载状态
                    this.loading = false
                }
            }
        },
        created() {
            this.accessSpreadSheet();
        }

    }
</script>

内容的提问来源于stack exchange，提问作者user9542422