Блог

Главная - Вопросы по программированию - Индикатор выполнения начальной загрузки не отображается в браузере с VueJS

Индикатор выполнения начальной загрузки не отображается в браузере с VueJS

#vuejs2 #bootstrap-4 #progress-bar #vue-component

#vuejs2 #bootstrap-4 #индикатор выполнения #vue-компонент

Вопрос:

Я использую Vue2 (webpack-simple) и хочу добавить индикатор выполнения начальной загрузки в компонент, он отображается в компоненте, но без визуальной прогрессии (aria-valuenow).

Я ввел все возможные скрипты: —> bootstrap css, jquery, popper и boostrap js.

Я что-то пропустил?

Вот мой index.html файл —>

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Vue Components</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href='https://fonts.googleapis.com/css?family=Arizonia' rel='stylesheet' type='text/css'>
  </head>
  <body>
    <div id="app">
    </div>
    <script src="/dist/build.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

И вот мой файл компонента Counter.vue —>

 <template>
    <div>
        <h4>Quotes Added</h4>
        <div class="progress" style="height: 20px;">
            <div 
                class="progress-bar progress-bar-striped progress-bar-animated bg-info"
                role="progressbar"
                style="width: 50%"
                aria-valuenow="50"
                aria-valuemin="0"
                aria-valuemax="100"
                >
                50%
            </div>
        </div>
    </div>
</template>

<script>
    export default {

    }
</script>

<style scoped>
    h4 {
        text-align: left;
    }
</style>

Я ожидал, что в моем браузере будет отображаться индикатор выполнения с уже выполненным 50% прогрессом. Но это всего лишь 0%. Есть идеи, почему?

Ответ №1:

Измените этот код :-

 <div 
            class="progress-bar progress-bar-striped progress-bar-animated bg-info"
            role="progressbar"
            style="width: 50%"
            aria-valuenow="50"
            aria-valuemin="0"
            aria-valuemax="100"
            >
            50%
        </div>

Как

 <div 
            class="progress-bar progress-bar-striped progress-bar-animated bg-info"
            role="progressbar"
            style="width: 50%"
            aria-valuenow="50"
            aria-valuemin="50"
            aria-valuemax="100"
            >
            50%
        </div>

Комментарии:

1. Спасибо за ваш ответ! Это звучит несколько нелогично. Не могли бы вы добавить объяснение, почему это работает?