How update percent value

[Fabszn]

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

[delowardev]

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

[Fabszn]

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,

[delowardev]

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

[Fabszn]

Many thanks for your answer.. I dive into it :)

[Fabszn]

It works fine ! Thanks...