vue中渲染对象中属性时显示未定义的解决

 更新时间:2020年07月31日 08:37:05   作者:拼搏到无能为力  
这篇文章主要介绍了vue中渲染对象中属性时显示未定义的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

后端给的对象结构是这样的,三层嵌套

而在最开始的时候我在data中定义了一个对象(dataInfo)接受了图示所有的属性

而在template中我要渲染数据(dataInfo.clientInfo.deviceName)

然后。。。。在这里插入图片描述

未定义。。。作为一个前端菜鸡,百思不得其解。

最终在有道的帮助下,告诉我了此属性不在vue实例上

恍然大悟

只能解析在data中定义也就是vue实例上的对象子一层的东西,对于孙一层的东西就被解析成不在vue实例上的

两种解决方法:

第一:

在定义的dataInfo中定义clientInfo等八个对象

第二:

直接定义八个对象接收八个对象中的东西

这样,孙一层的东西就在vue实例上了

补充知识:vue报错Cannot read property '_withTask' of undefined

控制台报错:

Cannot read property ‘_withTask' of undefined

原因:

template中的出现的绑定事件在methods中没有定义

以上这篇vue中渲染对象中属性时显示未定义的解决就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue3中集成高德地图并实现平移缩放功能

    Vue3中集成高德地图并实现平移缩放功能

    随着前端技术的不断发展,地图应用在我们的项目中越来越常见,本文将介绍如何在Vue3项目中集成高德地图,并通过简单的配置实现地图的平移和缩放功能,需要的朋友可以参考下
    2024-09-09
  • 详解vue-router的导航钩子(导航守卫)

    详解vue-router的导航钩子(导航守卫)

    这篇文章主要介绍了详解vue-router的导航钩子(导航守卫),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • elementUI动态嵌套el-form表单校验举例详解

    elementUI动态嵌套el-form表单校验举例详解

    最近工作遇到个需求,表单可以进行增加删除操作,需要进行表单校验,这篇文章主要给大家介绍了关于elementUI动态嵌套el-form表单校验的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • vue flex 布局实现div均分自动换行的示例代码

    vue flex 布局实现div均分自动换行的示例代码

    这篇文章主要介绍了vue flex 布局实现div均分自动换行,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • 一文详解如何创建Vue3项目及组合式API

    一文详解如何创建Vue3项目及组合式API

    Vue3提供了一种组合式API,可以用来构建可复用的组件和应用程序,下面这篇文章主要给大家介绍了关于如何创建Vue3项目及组合式API的相关资料,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • vue实现移动端可拖拽式icon图标

    vue实现移动端可拖拽式icon图标

    这篇文章主要为大家详细介绍了vue实现移动端可拖拽式icon图标,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue props使用typescript自定义类型的方法实例

    vue props使用typescript自定义类型的方法实例

    这篇文章主要给大家介绍了关于vue props使用typescript自定义类型的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2023-01-01
  • Nuxt3:拉取项目模板失败问题以及解决

    Nuxt3:拉取项目模板失败问题以及解决

    文章描述了在使用官网命令创建Nuxt3项目时遇到的问题,通过分析命令,推测问题出在拉取项目模板失败,解决方法是手动访问并下载项目模板,解压后按照官网教程安装依赖并启动,最终成功解决问题
    2024-12-12
  • vue3 setup语法糖之父子组件之间的传值方法

    vue3 setup语法糖之父子组件之间的传值方法

    父组件向子组件传值的时候,子组件是通过props来接收的,然后以变量的形式将props传递到setup语法糖果中使用,本文给大家介绍vue3 setup语法糖之父子组件之间的传值,感兴趣的朋友一起看看吧
    2023-12-12
  • Vue局部组件数据共享Vue.observable()的使用

    Vue局部组件数据共享Vue.observable()的使用

    随着组件的细化,就会遇到多组件状态共享的情况,今天我们介绍的是 vue.js 2.6 新增加的 Observable API ,通过使用这个 api 我们可以应对一些简单的跨组件数据状态共享的情况,感兴趣的可以了解一下
    2021-06-06

最新评论