Vuejs and laravel -NaN value? - laravel

Question

I want to recover a variable from controller and show it but its Show NaN instead of the value.
The idea is to claculate the the progress of my projects in function call progress in my controller and than show it in table in my Html code.
This is my function in controller and it return the correct value:
public function progress($id){
$tasks=Task::where(['projet_id'=>$id])->get();
$x=0;
$i=0;
foreach ($tasks as $task) {
$x = $x + $task->progress;
$i++ ;
}
$progress=$x/$i;
return $progress;
}
and this where i want to show the progress in project.vue:
<tr v-for="projet in projets.data" :key="projet.id" >
<td #change="avancemant(projet.id)">
{{ parseInt(100 * progress ) }}%
<img :src="`/img/icon/verif.png`" style="width:15px;
v-if="`${parseInt(100*progress)}`==100" >
</img>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="0"
id="progress" v-model="form.progress"
aria-valuemin="`${parseInt(100*task.progress)}`":style="
{'width':`${parseInt(100*progress)}%`}" aria-valuemax="100">
</div>
</div>
</td>
and this is my project.vue script:
export default {
data(){
return{
progress:'',
projets:{},
projet:{
id:''
},
}}
created(){
this.avancement(this.projet.id);
}
methods:{
avancemant($id){
axios.get('/api/progress/'+$id).then(({data})=>(this.progress =data.data));;
},
}
P.S : it show me in NaN%

Answer 1

In your created function, you tell vue to run the functioin this.avancement with a parameter of this.projet.id. Since you setup your data object to be the following:
data() {
return {
progress:'',
projets:{},
projet:{
id:''
},
}
}
This means that when your code executes the code inside the created hook, it will use the current state of your data.
created(){
this.avancement(this.projet.id); // this.projet.id's value at this point is '' (empty string)
}
So when your function then runs the http request, you are sending this:
axios.get('/api/progress/'+'').then(({data})=>(this.progress =data.data));
This probably breaks your API because it requires an id of some sorts.
At this point, I dont have enough info from your application or goal to know why you run this at created. But a solution to fix this as it is right now would be to add a condition inside your avancement function to not run it if the id is not valid.
methods:{
avancemant($id){
if(isNaN($id)) {
return
}
axios.get('/api/progress/'+$id).then(({data})=>(this.progress =data.data));;
},
}