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

这是我想在 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>

这是我的 project.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));;
         },
        } 

P.S : 它以 NaN% 显示我

Answer 1

在你创建的函数中，你告诉 vue 运行函数this.avancement，参数为this.projet.id。由于您将数据对象设置为以下内容：

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

这意味着当您的代码执行 created 钩子内的代码时，它将使用您数据的当前状态。

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 函数中添加一个条件，以便在 id 无效时不运行它。

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