This circular progress bar plugin doesn't seem to be working. When I add this to my code, it says event (in the method progress_end() is defined but not used).
Also, if I remove event as an argument this error comes-
You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions or use the compiler-included build
Please have a look at this link for reference.
https://www.npmjs.com/package/vue2-circle-progress
Could someone help me fix this?
<template>
<div id="app">
<vue-circle
:progress="50"
:size="100"
:reverse="false"
line-cap="round"
:fill="fill"
empty-fill="rgba(0, 0, 0, .1)"
:animation-start-value="0.0"
:start-angle="0"
insert-mode="append"
:thickness="5"
:show-percent="true"
@vue-circle-progress="progress"
@vue-circle-end="progress_end">
</vue-circle>
</div>
</template>
<script>
import VueCircle from 'vue2-circle-progress'
export default {
components: {
VueCircle
},
data(){
return{
fill : { gradient: ["red", "green", "blue"] },
}
},
methods:{
progress(event,progress,stepValue){
console.log(stepValue);
},
progress_end(event){
console.log("Circle progress end");
}
}
}
</script>
Update
There was an issue in my main.js. I used this code to make it work
el:'#app',
components: { App },
template: "<App/>",
render:h=>h(App)
I'm sorry I didn't know where the issue was but thank you !
If your project created by @vue/cli, create vue.config.js file and add:
module.exports = {
runtimeCompiler: true
}
It's not working, because you are passing constant numbers as props, and then just listening on the events.
:progress="50"
:size="100"
But also this 'package' is a huge mess, it will never work properly: author just packaged a Vue app and published it (with JQuery, jeez).
Look for other progress bar package. There are plenty, actively updated.
Edit:
About your runtime only build question, you probably just included Vue as a script like so: https://v2.vuejs.org/v2/guide/installation.html#CDN
This solution is only for prototyping.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.