Vuejs and laravel -NaN value?

Question

我想从控制器中恢复一个变量，并显示它，但显示它的show-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;
}

这是我想展示项目进展的地方

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

p.S：它显示的是NaN%

Answer 1

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

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

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