Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

birdietorerik's avatar

Dosent show circles

Hi!

Have this HTML+VUE

 <template>
                                                                <div
                                                                    v-if="
                                                                        floatcolorgreen ===
                                                                        1
                                                                    "
                                                                    class="fullCirclegreen"
                                                                >
                                                                    Grønn
                                                                </div>

                                                                <div
                                                                    v-if="
                                                                        floatcolororange ===
                                                                        1
                                                                    "
                                                                    class="fullCircleorange"
                                                                >
                                                                    Orange
                                                                </div>

                                                                <div
                                                                    v-if="
                                                                        floatcolorred ===
                                                                        1
                                                                    "
                                                                    class="fullCirclered"
                                                                >
                                                                    Rød
                                                                </div>
                                                            </template>

In javascript fullCirclegreen , floatcolororange and floatcolorred get values of 0 or 1.

This variables i get from axios,,,,,

object.floatcolororange = localStorage.getItem(
                "playerInfo_floatcolororange"
   );

Styling:

.fullCirclegreen {
    width: 30px;
    height: 30px;
    border: 1px solid;
    border-radius: 50%;
    background-color: greenyellow;
}
.fullCircleorange {
    width: 30px;
    height: 30px;
    border: 1px solid;
    border-radius: 50%;
    background-color: rgb(231, 159, 6);
}
.fullCirclered {
    width: 30px;
    height: 30px;
    border: 1px solid;
    border-radius: 50%;
    background-color: rgb(236, 99, 14);
}

So my question, why dosent v-if works (it dosent show me any of the 3 circles ??

0 likes
4 replies
Sinnbeck's avatar

A few questions

  1. Does the circles work if you don't have the if check?
  2. Is your formatting just broken here, or you have linebreaks in the if statement locally as well
  3. Did you post the wrong axios code? What you posted is local storage
1 like
birdietorerik's avatar

@Sinnbeck Hi!

  1. The circles works fine if i remove the v-if statments
  2. Dosent show the hole vue file to public. Just show the pease of code that are the issue
  3. Axios code working just fine, and return values to fullCirclegreen , floatcolororange and floatcolorred
1 like
kokoshneta's avatar
Level 27

Are you sure the values in your local storage are saved correctly and as integers? Since you’re using === 1, a string 1 won’t match.

birdietorerik's avatar

@kokoshneta Hi! The value is stored in localstorage, and its stored as string. You have 100% correct. :) Thanks :)

Please or to participate in this conversation.