商品详情引用数据时报错
来源：3-3 项目作业
qq_我不是看不起_0
2020-05-13 17:39:30
代码
-----------------------------
<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>
这两行引用数据的代码注释，报错就消失了
这是哪里不对
4回答
-
同学你好，可以添加一个判断
当contents.priceSectionData存在时，再渲染内容。
祝学习愉快~
0h020-05-18 -
好帮手慕言
2020-05-20
同学你好，如果contents.priceSectionData存在，那么数据一定是存在的，数据存在再去渲染到页面上就不会报错了。
祝学习愉快~
0 -
qq_我不是看不起_0
提问者
2020-05-15
api/product.js
-------------------------------------------
import jsonp from 'assets/js/jsonp'
import { jsonpOptions, TIMEOUT } from './config';
// 获取商品详情数据
export const getProductDetail = id => {
const url = 'https://unszacs.m.taobao.com/h5/mtop.taobao.detail.getdetail/6.0/'
const params = {
api: 'mtop.taobao.detail.getdetail',
ttid: '2017%40taobao_h5_6.6.0',
data: `%7B"itemNumId"%3A"${id}"%7D`,
appKey: 12574478,
dataType: 'jsonp',
type: 'jsonp',
v: '6.0'
}
// jsonpOptions.timeout = 100;
return jsonp(url, params, jsonpOptions).then(res => {
// console.log(res);
if (res.data) {
// console.log(res);
return JSON.parse(res.data.apiStack[0].value);
}
throw new Error('没有成功获取到数据！');
}).catch(err => {
if (err) {
console.log(err);
}
}).then(res => {
return new Promise(resolve => {
setTimeout(() => {
resolve(res);
}, 1000);
});
});
}
0 -
好帮手慕言
2020-05-13
同学你好，建议：把api/product.js中的代码也粘贴上来。祝学习愉快~
0h020-05-15
相似问题