报错信息:
VM15059:1 thirdScriptError
Cannot read property ‘url’ of undefined;at pages/history/history page lifeCycleMethod onReady function
TypeError: Cannot read property ‘url’ of undefined
如图所示:在这里插入图片描述
子组件

<template>
    <div class="goods-list-page">
      <div class="goods-list-container" >
        <image class="goods-list-img" :src="goodsList.url"/>
        <p class="goods-list-text">{{goodsList.text}}</p>
        <p class="goods-list-money">{{goodsList.money}}</p>
      </div>
    </div>
</template>
<script>
    export default {
        data () {
            return {

            }
        },
        props: {
          goodsList:{
            type:Object,
            required:true
          }
        }
    }
</script>

父页面

<template>
    <div>
      <goods-list v-for="(item,index) in goods"
                  :key="index"
                  :goodsList="item">
      </goods-list>
    </div>
</template>

<script>
  import goodsList from './components/goods.list';
    export default {
        data () {

            return {
              goods:[
                {
                  url:'../../../../static/history/history-list-1.jpg',
                  text:'无印良品懒人沙…',
                  money:'¥129'
                },
                {
                  url:'../../../../static/history/history-list-2.jpg',
                  text:'无印良品懒人沙…',
                  money:'¥129'
                },
                {
                  url:'../../../../static/history/history-list-3.jpg',
                  text:'无印良品懒人沙…',
                  money:'¥129'
                },
                {
                  url:'../../../../static/history/history-list-4.jpg',
                  text:'无印良品懒人沙…',
                  money:'¥129'
                }
              ]
            }
        },
      components: {
        goodsList
      }
    }
  }
</script>

解决办法:
在子组件的props里面添加一个default () {return {}},如下:

props: {
          goodsList:{
            type:Object,
            required:true,
            default () {
              return {}
            }
          }
        }
Logo

前往低代码交流专区

更多推荐