I'm currently working on a progress bar implementation where the progress status is determined by the submitAction method. The value for the progress bar is constantly being updated in this method. Here's my code:
1. Parent Component
<template>
<div>
<progressbar-component :value="progressState" />
</div>
</template>
<script>
import ProgressBar from './Progress.vue'
export default {
components: {
'progressbar-component': ProgressBar
},
data () {
return {
...
progress: 0,
...
}
},
computed: {
...
progressState () {
return this.progress;
}
...
},
methods: {
...
submitAction: function (event) {
...
let percent = 0;
setInterval(() => {
if(someState > 0) {
this.progress = percent % 100;
percent += 10;
}
}, 200);
...
}
}
}
</script>
2. Child (Progress Bar) Component
<template>
<div class="progress">
{{ value }}
</div>
</template>
<script>
export default {
name: 'progressbar-component',
props: {
value: {
type: Number,
default: 0
}
}
}
</script>
Aim:
The goal is to update the value in the Progress Bar component while the setInterval function is running.
Problem:
The value does not update in the child component.
P.S.
Some parts of the original code have been omitted for simplicity:
- The parent component's progress value changes correctly, and can be tracked.
- By debugging, it is evident that the progress bar component functions properly, and the initial value of progress (which is 0) is passed successfully.