[Vuejs]-Vue function not returning dynamic property instead showing initial value

by

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.

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.

Leave a comment