VueJS add width of progress bar

Question

I make progressbar of the user's referrals. As planned, if a user adds +1 referral, the progress bar is filled by %.

There is a finish number - 200. There is user.ref_num - the number of user referrals. So I'm trying to fill in the length of the progress bar, but something doesn't work.

My code:

        <div class="progress-panel-progress">
          <div class="progress-panel-progress__current" v-if="user.ref_num === 0" style="width: 0%;"> </div>
            <div class="progress-panel-progress__current" v-if="user.ref_num > 0" :style="(200 - user.ref_num) / 200 * 100">
            </div>
        </div>

But when i check source code, then I don't see the attribute style= and progressbar doesn't fill.

Where can be a problem?

Adam Orłowski · Accepted Answer · 2021-03-06 22:54:16Z

1

You didn't specify which style (width) you want to add.

Your code evaluates only to some Number. Since just a Number is not a correct CSS property, your browser probably strip it out.

Here is a line you need to modify:

<div
  class="progress-panel-progress__current"
  v-if="user.ref_num > 0"
  :style="`width: ${(200 - user.ref_num) / 200 * 100}%;`" // add style width like that
></div>

answered Mar 6, 2021 at 22:54

Adam Orłowski

4,53226 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

VueJS add width of progress bar

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related