Question

在使用v-if，v-else时，在页面加载开始时阻止闪烁，并尝试以其他方式使用v-cloak，但这是行不通的。在组件加载开始时，v-else块闪烁一秒钟，然后出现数据。是否有其他选择可以解决此问题或以某种方式使用v-cloak。

html文件

<body>
    <div class="main_content">
        <div id="app"></div>
    </div>
</body>

Master.vue

<template>
    <div>
         <router-view></router-view>
    </div>
</template>

闪烁组件

<template>
    <div>         
        <div class="row">
            <div class="col-8">
                <div v-cloak v-if="orders.length != 0">
                    <div class="mt-5" v-for="order in orders" v-bind:key="order.id">
                        <order-progress v-bind:order="order"></order-progress>
                        <hr>
                    </div>
                </div>
                <div v-cloak v-else>
                    <h2 class="mt-5"> You did not order anything </h2>
                </div>
            </div>

        </div>
        <div v-cloak>
        {{ orders }} some..
        </div>       
    </div>
</template>

<script>
    import axios from 'axios'
    import OrderProgress from './OrderProgress'
    export default {
        data() {
            return {
                orders: [],

            }
        },
        components: {
            'order-progress': OrderProgress,
        },
        methods: {

            async init() {
                await this.getData();
            },
            async getData() {
                await axios.get(window.location.origin + "/api/orders")
                    .then((response) => {
                        this.orders = response.data.orders;
                    });
            },
        },
        mounted() {
            this.init();
        }
    } 
</script>

<style>
  [v-cloak] {
  display: none !important;
}
</style>

Vue JS如何在使用v-if时摆脱闪烁的块？

0 个答案: