vuetify прогресс-линейный компонент не показывает прогресс, как ожидалось - PullRequest
Новая
       13

vuetify прогресс-линейный компонент не показывает прогресс, как ожидалось

0 голосов
/ 07 января 2020

Я работаю над проектом панели мониторинга, где я хочу представить на панели мониторинга несколько виджетов. Одним из них является показать администраторам визуализацию их активных / неактивных устройств, и, поскольку весь проект основан на vuetify, я пытаюсь сделать это с помощью компонента v-progress-linear. Но по некоторым причинам он не показывает прогресс должным образом, даже если я не изменяю значение для бара. Ниже мой код и снимок экрана с результатом. Я не смог найти никакого решения для этого онлайн, поэтому я предполагаю, что мне не хватает чего-то очень основательного c об использовании компонента или компоновке сетки, в которую он обернут.

Любая помощь будет оценена ... результат 

<template>
<v-container fluid class="grey lighten-5">
    <v-card outlined flat class="mx-auto" align="center">
        <v-icon large class="mt-5 mb-1">mdi-developer-board</v-icon>
        <v-card-title class="justify-center pt-1 display-2 font-weight-black" > {{totalDevices}} </v-card-title>
        <v-card-subtitle class="justify-center">Total no of Devices</v-card-subtitle>
        <v-divider></v-divider>
        <v-row >
            <v-col>
                <v-card flat>
                <span class="caption" >Active: </span>
                <span class="subtitle-2" >{{totalActive}}</span>
                <v-progress-linear style="margin : 0 auto ;" class="mt-3" determinate color="#3cd1c2" :value="calcProgressValue('active')" ></v-progress-linear>
                </v-card >
            </v-col>
            <v-divider vertical></v-divider>
            <v-col class="d-flex justify-center">
                <v-card flat>
                    <span class="caption">Idle: </span>
                    <span class="subtitle-2 align-right" >{{totalIdle}}</span>
                    <v-progress-linear style="margin : 0 auto ;" class="mt-3 text-xs-center" determinate color="#ffaa2c" :value="calcProgressValue('idle')" ></v-progress-linear>
                </v-card>
            </v-col>
        </v-row>
        </v-card>
</v-container>
</template>
...