我该如何解决 [Vue 警告]：数据（）中的错误：Laravel Vue 中的“ReferenceError：total is not defined”

Question

我认为我的问题在于数据方法中的利润详细信息的定义。 我已经定义如下，

data(){
   return{
       profitDetails:[],  
         }
      }

我创建的 axio 如下

getProfit(){
     axios.get('api/get-profit').then(response => {
     this.profitDetails = response.data;
     console.log('*************',response.data);
     });
 }

使用 console.log('*************',response.data) 打印以下内容，

使用上面的 axio 我按如下方式访问数据并已经打印了该值，但它提供了控制台错误，就像我在下面附加的图像一样，

{{profitDetails[0].total}} 
{{profitDetails[1].total}} 
{{profitDetails[2].total}} 
{{profitDetails[3].total}} 

但在控制台中显示以下错误

Answer 1

在渲染模板之前，您应该检查是否已从 API 填充了 profitDetails。 例如：

<div v-if="profitDetails.length > 0">

{{profitDetails[0].total}} 
{{profitDetails[1].total}} 
{{profitDetails[2].total}} 
{{profitDetails[3].total}} 

</div>