在异步 es6 中使用 v-if 加载答案

【问题标题】：Using v-if loading with async es6在异步 es6 中使用 v-if 加载
【发布时间】：2021-11-09 23:35:11
【问题描述】：

我们如何使用 Vue 处理来自 Es6 的异步错字的 v-if 加载？

这是模板，我也将解决方案放在下面，希望对您有所帮助。

这对我有帮助，所以我知道每个人的学习方式都不一样，所以这是我理解事物的方式，少理论多实践，祝你有美好的一天！

<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: [], // your data things
                
            }
        },
        methods:{
            async accessSpreadSheet() {
                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;
                
            }
        },
        created() {
            this.accessSpreadSheet();
        }

    }

【问题讨论】：

标签： vue.js asynchronous ecmascript-6 loading

【解决方案1】：

使用 v-if 加载骨架加载器或其他任何东西的示例，使用异步数据方法...我猜在 vue

不完美，但我希望它有所帮助，我将添加重要的部分：

<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: [], // your data things
                loading: true, //this is what matters
            }
        },
        methods:{
            async accessSpreadSheet() {
                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;
                this.loading = false; //this is what works
            }
        },
        created() {
            this.accessSpreadSheet();
        }

    }

【讨论】：