vuejs中嵌套Api/Laravel集合响应的输出值

我正在尝试将

axios

承诺的值输出到我的

vue

组件。到目前为止，我仍然收到一个错误

[Vue warn]：render中的错误：“TypeError:无法读取null的属性‘姓氏’”

。下面是我的代码

<template> 
  <div> 
     {{user.surname}}
  </div>
</template>
<!-- ----------------------------------------------------------------------------------- -->

<script>
   export default {
   name: 'EmployeeCard',

   data(){
     return{
       user: null
     }
   },

   methods:{
     getUser(){
       axios.get('/api/users/'+ this.$route.params.id)
            .then ( response => {
                    this.user = response.data.data; 
             })
     }
  },

  mounted(){
     this.getUser();
  }

  }
</script>

---

您的用户变量最初将为null，并且您无法从null值获取属性。因此，您应该将

{{user.lasname}}

替换为

{{user？user.lasname:'}}

---

另一个问题是响应中的

data

属性是一个数组，而不是一个对象，因此在挂载的钩子中不能执行

this.user=response.data.data

。相反，您应该执行

this.user=response.data[0]。data

这样，当您的用户未被抓取时，您将显示一个空文本，而不是出现错误

此外，我建议您在承诺中添加一个钩子，以避免任何可能的错误。

<template> 
  <div> 
     {{surname}}
  </div>
</template>
<!-- ----------------------------------------------------------------------------------- -->

<script>
   export default {
   name: 'EmployeeCard',

   data(){
     return{
       user: null
     }
   },

   computed: {
    surname () {
     if (this.user) {
      return this.user.surname
     }
    }

   }

   methods:{
     getUser(){
       axios.get('/api/users/'+ this.$route.params.id)
            .then ( response => {
                    this.user = response.data[0].data; 
             })
     }
  },

  mounted(){
     this.getUser();
  }

  }
</script>

{{姓氏}
导出默认值{
姓名：“员工卡”，
数据（）{
返回{
用户：空
}
},
计算：{
姓（）{
if（this.user）{
返回this.user.name
}
}
}
方法：{
getUser（）{
get（'/api/users/'+this.$route.params.id）
。然后（响应=>{
this.user=response.data[0]。数据；
})
}
},
安装的（）{
这个.getUser（）；
}
}

{{user.namite}}
导出默认值{
姓名：“员工卡”，
数据（）{
返回{
用户：{}
}
},
方法：{
getUser（）{
get（'/api/users/'+this.$route.params.id）
。然后（{data}=>{
this.user=data[0]。数据；
})
}
},
安装的（）{
这个.getUser（）；
}
}

您遇到了哪些错误？您应该在承诺中添加一个捕获项以查看任何错误[Vue warn]：呈现中的错误：“TypeError:无法读取null的属性‘姓氏’”您需要在数据中初始化您的用户对象，使用您正在使用的所述属性，因为它已经为null，您需要将用户设置为对象，然后初始化其余值：

user:{姓氏：“”

在挂载钩子之前，它创建了组件并使用数据，该数据仍然是

null

并且在呈现组件之后挂载了调用。它只是空白@Ayrton，不确定my

catch

hook@codervine试试我在编辑的第二段中添加的内容我已经完成了

response.data.data[0]

然后在我的

模板上

，

{{{user.data.nam姓氏}}

显示，但我在渲染中仍然有这个错误

错误：“TypeError:无法读取null的属性'data'”

@codervine否，只需转到您安装的钩子并将

this.user=response.data.data

替换为

this.user=response.data[0].data

this.user=response.data.data[0].data是什么工作非常完美谢谢。。。您可以更新您的答案。请编辑此答案，并对whis解决问题的原因进行解释
<template> 
  <div> 
     {{surname}}
  </div>
</template>
<!-- ----------------------------------------------------------------------------------- -->

<script>
   export default {
   name: 'EmployeeCard',

   data(){
     return{
       user: null
     }
   },

   computed: {
    surname () {
     if (this.user) {
      return this.user.surname
     }
    }

   }

   methods:{
     getUser(){
       axios.get('/api/users/'+ this.$route.params.id)
            .then ( response => {
                    this.user = response.data[0].data; 
             })
     }
  },

  mounted(){
     this.getUser();
  }

  }
</script>

<template> 
  <div> 
      {{ user.surname }}
  </div>
</template>

<script>
    export default {
    name: 'EmployeeCard',

    data(){
        return{
            user: {}
        }
    },

    methods:{
        getUser(){
            axios.get('/api/users/'+ this.$route.params.id)
        .then ( {data} => {
                this.user = data[0].data; 
         })
        }
    },

    mounted(){
        this.getUser();
    }
}
</script>