我正在调用 API,每次加载页面时都会出现此错误,我不知道为什么。谁能告诉我为什么?我试着把它:
这是我使用总金额的标记:
<div class="summary__graph">
<div class="graph__header">
<h3 class="headline">Fordeling</h3>
<p class="answers">{{company.amount.total}} besvarelser</p>
</div>
这是我定义我的公司的地方,我用总价值填充
data () {
return {
selected: 1,
datacollection: null,
datacollection2: null,
datacollection3: null,
company: '',
isActive: false,
scoreLine: null,
timeBar: null,
answerPercent: null
}
},
vue.js 挂载和方法
mounted () {
this.getStoreScore()
this.fillData()
this.fillData2()
this.fillData3()
this.fillDataScoreLine()
this.fillDataTimeBar()
this.fillDataAnswerPercent()
},
getStoreScore () {
return axios.post('API', {
storeId: '5b7515ed5d53fa0020557447'
}).then(response => {
this.company = {
'storeScore': response.data.result,
'amount': {
'total': response.data.amount.total,
'zero': {
'amount': response.data.amount.zero,
'percentage': response.data.amount.zero / response.data.amount.total * 100
},
'one': {
'amount': response.data.amount.one,
'percentage': response.data.amount.one / response.data.amount.total * 100
},
'two': {
'amount': response.data.amount.two,
'percentage': response.data.amount.two / response.data.amount.total * 100
},
'three': {
'amount': response.data.amount.three,
'percentage': response.data.amount.three / response.data.amount.total * 100
}
}
}
return this.company
})
},
谁能告诉我为什么它给我这个错误?:D
因为您正在进行 API 调用,所以页面会在您收到任何数据之前呈现。您会收到错误,因为company.amount
页面呈现时未定义。有一些可能的修复方法:要么延迟页面渲染,直到接收到所有数据,要么编写一个快速的 if 条件。
<p class="answers">{{company.amount.total}} besvarelser</p>
更多信息:https : //vuejs.org/v2/guide/conditional.html
编辑:您的代码将成为
<p v-if="company.amount" class="answers">{{company.amount.total}} besvarelser</p>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句