CODEWITHSUNDEEP
vue.jsbootstrap-vue
Tom Dickson
Tom Dickson

Reputation: 622

Change colour of progress bar if value is larger than 50 Bootstrap-Vue

Trying to change the colour of progress bar dynamically using v-bind (don't have to use it). Here is my code:

<b-progress height={} v-model="item.value.value" class="progress-xs" variant="{ 'success': item.value.value > 50,  'warning': item.value.value > 30, 'danger': item.value.value > 10}"></b-progress>

Upvotes: 2

Views: 2690

Answers (2)

Nealon
Nealon

Reputation: 2243

ittus's answer is pretty close, but it didn't work for me. I was able to get it working by dynamically setting color rather than variant, which doesn't appear to be a progress property

<b-progress 
  height={} 
  v-model="item.value.value" 
  class="progress-xs" 
  :color="getColor(item)">
</b-progress>

methods: {
  getColor: function(item) {
    if (item.value.value > 50) {
      return 'green'
    } else if (item.value.value > 30) {
      return 'yellow'
    } else if (item.value.value > 10) {
      return 'red'
    }
    return ''
  }
}

Upvotes: 2

ittus
ittus

Reputation: 22403

You need to bind :variant and define custom methods to get variant type:

<b-progress 
  height={} 
  v-model="item.value.value" 
  class="progress-xs" 
  :variant="getVariantType(item)">
</b-progress>

methods: {
  getVariantType: function(item) {
    if (item.value.value > 50) {
      return 'success'
    } else if (item.value.value > 30) {
      return 'warning'
    } else if (item.value.value > 10) {
      return 'danger'
    }
    return ''
  }
}

Upvotes: 1

Related Questions