How update percent value
Fabszn opened this issue · 5 comments
Hello
I little bit confused.. I am using vue3-circle-progress component in my app.
I didn't find a way to update percent value dynamically.
It seems that in documentation no information about this feature.
Could you have any advice to share.
Many thanks.
Kind regards
Hi @Fabszn,
You can define the percentage value in your component & pass it to the vue3-circle-progress
, example:
<CircleProgress :percent="percent" :viewport="true" :show-percent="true" />
setup() {
const percent = ref(75);
// update percentage value
onMounted(() => {
setInterval(() => {
if (percent.value === 25) {
percent.value = 75;
} else {
percent.value = 25;
}
}, 1000);
});
return {
percent,
};
}
Here is the live example: https://codesandbox.io/s/determined-dawn-3ybev?file=/src/App.vue:39-114
Many thanks for you quick answer.
I looked at your example, but probably I am to newbe with vueJS... but what ref(75)
means ?
I tried to implement as your example, but I got error message that value is on readonly mode.
Many thanks for your help,
Here ref(75)
means, I set a default initial value of 75. Please check the ref
documentation here: https://vuejs.org/api/reactivity-core.html#ref
Many thanks for your answer.. I dive into it :)
It works fine ! Thanks...