84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
父元件App.vue
#子元件sonCp.vue
資料結構
報錯但是資料能渲染上去
#求解,順便幫我看一下我取資料方式對麼,是放到created這個裡面麼
子组件最初得到的是空字符串,木有.acount.name之类的属性,所以出错。
最简单的解决办法:
父组件App.vue中的
<sonCp :dataObj="dataObj" />
改成:
<sonCp :dataObj="dataObj" v-if="dataObj" />
异步请求的数据是会渲染两次的!第一次是请求没完成时,这时候obj是你返回的''。然后子组件去取值,肯定发生错误呀!第二次才是请求返回,然后才有数据。所以解决方式就很明显了,有很多种解决方式。
初始时dataObj是空字符,所以传到子组件肯定会报错,可以通过v-if判定下是否已取到数据,取到之后再进行渲染。
一、如楼上所述,在dom中通过v-if判断dataObj.length,保证在有数据情况下的渲染(推荐!!)
二、提前在父组件data选项中设定好dataObj对象的数据结构,比如:
data() { return { dataObj: { id: '', account: { name: '', age: '' } } }; }
另外建议楼主尽量在data选项中预留初始项时选择合适的数据类型赋默认值,比如父组件中dataObj要存放的是数组类型,尽量dataObj: [],这样也语义表达上也明确。
dataObj: []
<son-cp :data-obj="dataObj"></son-cp>
子组件最初得到的是空字符串,木有.acount.name之类的属性,所以出错。
最简单的解决办法:
父组件App.vue中的
改成:
异步请求的数据是会渲染两次的!第一次是请求没完成时,这时候obj是你返回的''。然后子组件去取值,肯定发生错误呀!第二次才是请求返回,然后才有数据。所以解决方式就很明显了,有很多种解决方式。
初始时dataObj是空字符,所以传到子组件肯定会报错,可以通过v-if判定下是否已取到数据,取到之后再进行渲染。
一、如楼上所述,在dom中通过v-if判断dataObj.length,保证在有数据情况下的渲染(推荐!!)
二、提前在父组件data选项中设定好dataObj对象的数据结构,比如:
另外建议楼主尽量在data选项中预留初始项时选择合适的数据类型赋默认值,比如父组件中dataObj要存放的是数组类型,尽量
dataObj: []
,这样也语义表达上也明确。