[Vuejs]-Cant change type(danger,success) and add animated on vue strap

by

0👍

✅

There is a bug in VueStrap library when it comes to progress bar animations. The template for progress bar in VueStrap uses class active to animate, whereas, in Bootstrap 4 we have to use class progress-bar-animated. A work around of this problem is to created your own Progress Bar component which makes use of the Bootstrap 4.

Custom Progress Bar component could be written as:

Vue.component('c-progressbar', {
  template: `
    <div class="progress">
      <div class="progress-bar" :class="progressClasses"
          role="progressbar"  
          :style="progressStyle"></div>
    </div>`,
  props: {
    striped: Boolean,
    animated: Boolean,
    now: {
      type: Number,
      required: true
    },
    contextType: {
      type: String,
      default: 'primary'
    }
  },
  data: function() {
    let context = 'bg-' + this.contextType
    return {
      progressClasses: {
        'progress-bar-striped': this.striped,
        'progress-bar-animated': this.animated,
        [context]: true
      },
      progressStyle: {
        width: this.now + '%'
      }
    }
  }
})
new Vue({ el: '#app' })

You can use this pen for testing: https://codepen.io/abdullah-shabaz/pen/YzXdYgd

Leave a comment