Vuejs и laravel -NaN значение?

Question

Я хочу восстановить переменную из контроллера и показать ее, но вместо ее значения отображается значение NaN. Идея состоит в том, чтобы проследить за ходом моих проектов в ходе выполнения вызова функции в моем контроллере, а затем показать это в таблице в моем коде Html. Это моя функция в контроллере, и она возвращает правильное значение:

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;
}

, и здесь я хочу показать прогресс в проекте. 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>

, и это мой проект. vue скрипт:

  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));;
         },
        } 

PS: он показывает мне в NaN%

Answer 1

В созданной вами функции вы указываете vue запустить функцию this.avancement с параметром this.projet.id. Поскольку вы устанавливаете ваш объект данных следующим образом:

data() {
  return {
    progress:'',
    projets:{},
    projet:{
      id:''
    },
  }
}

Это означает, что когда ваш код выполняет код внутри созданного хука, он будет использовать текущее состояние ваших данных.

created(){
  this.avancement(this.projet.id); // this.projet.id's value at this point is '' (empty string)
}

Таким образом, когда ваша функция запускает http-запрос, вы отправляете следующее:

axios.get('/api/progress/'+'').then(({data})=>(this.progress =data.data));

Это, вероятно, нарушает ваш API, потому что требует некоторый идентификатор id.

На этом этапе Мне не хватает информации из вашего приложения или цели, чтобы понять, почему вы запускаете это при создании. Но решение, чтобы исправить это, как сейчас, было бы добавить условие внутри вашей функции avancement, чтобы оно не запускалось, если идентификатор недействителен.

methods:{
  avancemant($id){
   if(isNaN($id)) {
      return
   }
    axios.get('/api/progress/'+$id).then(({data})=>(this.progress =data.data));;
  },
}