palerdot / vue-speedometer

Vue component library for showing speedometer like gauge using d3
https://palerdot.in/vue-speedometer
MIT License
60 stars 8 forks source link

Spedometer resets to 0 in case of using vuex state parameter as value an v-if statement #60

Closed VladymyrKarpov closed 8 months ago

VladymyrKarpov commented 2 years ago

After async loading data speedometer resets to 0 with v-if statement. If I use forceRedraw parameter everything work as expected

<speedometer
                :minValue="0"
                :maxValue="110"
                :maxSegmentLabels="0"
                :segments="5"
                :segmentColors='["#ff4719", "#f7951e", "#ecdc21", "#afe229", "#6ad72e"]'
                :value="rating"
                :customSegmentStops="[0, 50, 77, 100, 110]"
            ></speedometer>

Preview

palerdot commented 2 years ago

Please share a reproducible repo for better understanding of this issue.

VladymyrKarpov commented 2 years ago

Please share a reproducible repo for better understanding of this issue.

Here it is : Repo link Thank you!

Sanan4li commented 1 year ago

I am facing the same issue, any update? I am using vue 2.

palerdot commented 1 year ago

There is no update as Vue 2 support is not currently supported. The library was updated to work with Vue 3 before this issue was created. I cannot pinpoint if the issue is from the vuex side or how life cycles are handled by the library. Maybe try reproducing this with Vue3/Pinia and see if the same issue persists. If the issue exists with Vue3/Pinia I may consider taking a look.

DsWebApp commented 11 months ago

Create a separate component for speedometer and then add v-once to it. It is working for me.

Sanan4li commented 11 months ago

Create a separate component for speedometer and then add v-once to it. It is working for me.

Can you share the link?

palerdot commented 8 months ago

v3 is published with composition api/SFC (single file component) support. This is the recommended version for Vue 3 composition api users.