首页  >  问答  >  正文

javascript - vue通过props传递对象会报错

父组件App.vue

子组件sonCp.vue

数据结构

报错但是数据能渲染上去

求解,顺便帮我看一下我取数据方式对么,是放到created这个里面么

phpcn_u1582phpcn_u15822732 天前873

全部回复(5)我来回复

  • 伊谢尔伦

    伊谢尔伦2017-05-19 10:44:21

    子组件最初得到的是空字符串,木有.acount.name之类的属性,所以出错。

    最简单的解决办法:

    父组件App.vue中的

    <sonCp :dataObj="dataObj" />

    改成:

    <sonCp :dataObj="dataObj" v-if="dataObj" />

    回复
    0
  • 伊谢尔伦

    伊谢尔伦2017-05-19 10:44:21

    异步请求的数据是会渲染两次的!第一次是请求没完成时,这时候obj是你返回的''。然后子组件去取值,肯定发生错误呀!第二次才是请求返回,然后才有数据。所以解决方式就很明显了,有很多种解决方式。

    回复
    0
  • 给我你的怀抱

    给我你的怀抱2017-05-19 10:44:21

    初始时dataObj是空字符,所以传到子组件肯定会报错,可以通过v-if判定下是否已取到数据,取到之后再进行渲染。

    回复
    0
  • 曾经蜡笔没有小新

    曾经蜡笔没有小新2017-05-19 10:44:21

    一、如楼上所述,在dom中通过v-if判断dataObj.length,保证在有数据情况下的渲染(推荐!!)

    二、提前在父组件data选项中设定好dataObj对象的数据结构,比如:

    data() {
        return {
            dataObj: {
                id: '',
                account: {
                    name: '',
                    age: ''
                }
            }
          
        };
    }

    另外建议楼主尽量在data选项中预留初始项时选择合适的数据类型赋默认值,比如父组件中dataObj要存放的是数组类型,尽量dataObj: [],这样也语义表达上也明确。

    回复
    0
  • 为情所困

    为情所困2017-05-19 10:44:21

    雷雷

    回复
    0
  • 取消回复