CODEWITHSUNDEEP
vuejs2
foliwe83
foliwe83

Reputation: 590

Using Ternary condition inside a class in Vue.js

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%

Upvotes: 2

Views: 4847

Answers (2)

Damon
Damon

Reputation: 4484

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.

  • Leadership
  • History
  • Careers

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';
    }
}

Upvotes: 0

aprouja1
aprouja1

Reputation: 1810

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' : '' "

Upvotes: 7

Related Questions