How can I write a ternary condition to change the color of this progress-bar when the percentage reaches 57
This is how the code for the progress-bar is set
<div
class="progress-bar"
role="progressbar"
:style="{width:(quoteCount / maxQuotes) * 100 + '%'}"
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100">
{{quoteCount}} / {{maxQuotes}}
</div>
..................
So, I want to add the class progress-bar bg-danger when I get to 75%
You would need to access the value of the progress bar, so ideally you would v-model to some data value, like progress. Then just:
:class="progress > 75 ? 'bg-danger' : '' "
quoteCount / maxQuotes.Not specific to OP's question, but I was looking for the same question and it was helpful to get going in the right direction. Hopefully this will help someone else as well...
I wanted to expand/collapse a "group" of navigation items. For example, the following pages could live under an "About Us" section of a website.
In this example, if any one of those sub-menu items are selected, I want to expand the entire "About Us" navigation group by setting the parent class to active. If the user has clicked into a different "group" I want to set the parent class to collapsed.
<div class="nav item">
<a class="nav-link"
:class="(currentGroup === 'about') ? 'active' : 'collapsed'">About Us</a>
...
</div>
<div class="subnav-items">
<a :href="'/leaderhip'"
:class="{'active':(pathname === 'leadership')}">Leadership</a>
<a :href="'/history'"
:class="{'active':(pathname === 'history')}">History</a>
<a :href="'/careers'"
:class="{'active':(pathname === 'careers')}">Careers</a>
</div>
...
data: () => ({
currentGroup: '',
groups: {
about: [
'leadership',
'history',
'careers',
],
},
pathname: '',
}),
created() {
this.pathname = window.location.pathname.split('/')[1];
if (this.groups.about.includes(this.pathname)) {
this.currentGroup = 'about';
}
}
