title: Vuejs and laravel -NaN value?
body: <p>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:</p>
  
  <pre><code>public function progress($id){
  
     $tasks=Task::where(['projet_id'=&gt;$id])-&gt;get();
     $x=0;
     $i=0;
      foreach ($tasks as $task) {
  
          $x = $x + $task-&gt;progress;
          $i++ ;
       }
       $progress=$x/$i;
       return $progress;
  }
  </code></pre>
  
  <p>and this where i want to show the progress in project.vue:</p>
  
  <pre><code>    &lt;tr v-for="projet in projets.data" :key="projet.id" &gt;
      &lt;td @change="avancemant(projet.id)"&gt;
      {{ parseInt(100 * progress ) }}%
      &lt;img :src="`/img/icon/verif.png`" style="width:15px; 
       v-if="`${parseInt(100*progress)}`==100" &gt;
      &lt;/img&gt;
      &lt;div class="progress"&gt;
      &lt;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"&gt;
       &lt;/div&gt;
       &lt;/div&gt;             
       &lt;/td&gt;
  </code></pre>
  
  <p>and this is my project.vue script:</p>
  
  <pre><code>  export default {
           data(){
               return{
            progress:'',
            projets:{},
            projet:{
                id:''
            },
            }}
          created(){
          this.avancement(this.projet.id);
          }
          methods:{
           avancemant($id){
             axios.get('/api/progress/'+$id).then(({data})=&gt;(this.progress =data.data));;
           },
          } 
  </code></pre>
  
  <p>P.S : it show me in NaN%</p>