[Vuejs]-Dynamically change the aria-valuenow of a Bootstrap progress-bar in a VueJS component

by

4👍

That’s because the aria-valuenow does not control the visual width of the progress bar, the style="width: 25%" does. 

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>
👤Steven B.

Leave a comment