商品详情引用数据时报错

代码

-----------------------------

<template>

<div class="content-wrapper">

<div class="content-top">

<div class="price-text">{{contents.priceSectionData.price.priceText}}</div>

<div class="sold-count">{{contents.priceSectionData.mainBelt.soldCount.text}}</div>

</div>

<div class="content-middle">

<div class="content-middle-title">{{contents.item.title}}</div>

<div class="content-middle-box">

<div>{{contents.delivery.postage}}</div>

<div>月销量 {{contents.item.vagueSellCount}}</div>

<div>{{contents.delivery.from}}</div>

</div>

</div>

<div></div>

</div>

</template>

<script>

import {getProductDetail} from 'api/product';

export default {

name:'ProductContent',

components:{

},

data(){

return{

contents:{}

}

},

created(){  // 获取远程数据

this.getSliders()

},

methods:{

getSliders(){

return getProductDetail(this.$route.params.id).then(data => {

this.contents = data

console.log(this.contents)

})

}

}

}

</script>

--------------------------------------------

接收的数据

-------------------------------

报的错误

----------------------

将

<div class="price-text">{{contents.priceSectionData.price.priceText}}</div>

<div class="sold-count">{{contents.priceSectionData.mainBelt.soldCount.text}}</div>

这两行引用数据的代码注释，报错就消失了

这是哪里不对