0👍
You need to make getProgressBar()
a computed property instead of a method.
computed: {
getProgressBar() {
return this.progressBar;
}
}
Also, you should use camel case or snake case for your variables.
- [Vuejs]-Vue/Nuxt component with axios request not fetching result when registered in default layout
- [Vuejs]-Importing dependency works in one file, but not the other
0👍
The problem is the scoping of this
in the code below:
onUploadProgress: function (uploadEvent) {
this.ProgressBar = Math.round((uploadEvent.loaded / uploadEvent.total)*100) + '%';
Because this is a new function it has its own this
value, it does not use the this
value from the surrounding code.
The simplest way to fix this is to use an arrow function:
onUploadProgress: (uploadEvent) => {
this.ProgressBar = Math.round((uploadEvent.loaded / uploadEvent.total)*100) + '%';
An arrow function retains the this
value from the surrounding scope.
I also suggest getting rid of the jQuery line starting $(".inner-progressBar")
, that shouldn’t be necessary once you fix the this
problem as it will be handled by the template instead.
Further, it’s unclear why you have a getProgressBar
method at all. If it is just going to return ProgressBar
then you can use that directly within your template without the need for a method.