I am facing an issue where my component renders HTML before fetching data, resulting in no data being displayed until I make an API call within the component using a link rendering function.
Can someone guide me on how to render my component after the data is fetched? I have tried using the v-if condition, but it renders my page without any data. Removing the v-if results in a 'can't read property of undefined' error.
<div class="score">
<p class="number">{{company.storeScore}} test</p>
<p class="text">Tilfredhedscore</p>
</div>
getStoreScore (condition) {
return axios.post('API-LINK', {
storeId: '5b7515ed5d53fa0020557447',
condition: condition
}).then(response => {
this.company.storeScore = response.data.result
this.company.amount = {
'total': response.data.amount.total,
'zero': {
'amount': response.data.amount.zero,
'percentage': (response.data.amount.zero !== 0 ? response.data.amount.zero / response.data.amount.total * 100 : 0)
},
'one': {
'amount': response.data.amount.one,
'percentage': (response.data.amount.one !== 0 ? response.data.amount.one / response.data.amount.total * 100 : 0)
},
'two': {
'amount': response.data.amount.two,
'percentage': (response.data.amount.two !== 0 ? response.data.amount.two / response.data.amount.total * 100 : 0)
},
'three': {
'amount': response.data.amount.three,
'percentage': (response.data.amount.three !== 0 ? response.data.amount.three / response.data.amount.total * 100 : 0)
}
}
})
}
data () {
return {
selected: 1,
company: {},
isActive: false,
test12345: {}
}
},
https://i.sstatic.net/584rT.png
Thanks in advance
UPDATE (solved): the company definition were null before like this
data() {
return{
company: null
}
}
this caused problems with rendering out my data. the fix is to define the things in my array i want to use
e.g
data() {
return{
company: {
amount: {
total: null
}
}
}
}