Динамическое изменение aria-valuenow Bootstrap индикатора выполнения в компоненте VueJS - PullRequest
Новая
       21

Динамическое изменение aria-valuenow Bootstrap индикатора выполнения в компоненте VueJS

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

Я создаю сайт, используя VueJS и Bootstrap. Я решил использовать «Ваниль» Bootstrap, а не VueJS фреймворк, такой как VueBootstrap или VueStrap.

Я пытаюсь создать пользовательский компонент, обертывающий индикатор выполнения Boostrap, и хотел бы, чтобы он имел атрибут данных value, который со временем может измениться. С помощью следующего кода, почему компонент не перерисовывается при изменении value? Разве v-bind не должен этого допустить? Вот мой код: 

<template>
  <div>
    <h1>Item</h1>
    <div class="progress" style="height: 50px;">
      <div
        class="progress-bar"
        role="progressbar"
        style="width: 25%;"
        v-bind:aria-valuenow="value"
        aria-valuemin="0"
        aria-valuemax="100"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  data: () => {
    return {
      value: 0,
      timer: null
    };
  },
  mounted() {
    this.timer = setInterval(() => {
      this.value = 25 + Math.random() * 75;
      console.log(this.value);
    }, 2000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  }
};
</script>

Я вижу журналы в своей консоли, но на индикаторе выполнения ничего не движется.

Моя конечная цель - анимировать компонент так, чтобы он загружался, значение постепенно изменяется от 0 до заданного значения.

1 Ответ

1 голос
/ 19 января 2020

Это потому, что aria-valuenow не контролирует визуальную ширину индикатора выполнения, а style="width: 25%" -. 

new Vue({
  el: "#app",
  data: {
      value: 0,
      timer: null
  },
  mounted() {
    this.timer = setInterval(() => {
      this.value = 25 + Math.random() * 75;
      // console.log(this.value);
    }, 2000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  }
})
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app">
  <h1>Item</h1>
  <div class="progress" style="height: 50px;">
    <div
         class="progress-bar"
         role="progressbar"
         v-bind:style="{ width: value + '%'}"
         v-bind:aria-valuenow="value"
         aria-valuemin="0"
         aria-valuemax="100"
         ></div>
  </div>
</div>
...