Utilizing an axios call, I retrieve data in the following format:
export default {
name: 'TaxesSection',
data () {
return {
isFormShown: false,
isLoading: false,
isOpen: false,
info: null,
dist: null,
tableauDistance: [],
tableauGeneral: {},
tabName: [],
tabProrataDist: [],
tabPriceHt: [],
voyages: {},
id: null,
amount: null,
errors: []
}
},
// This fetches posts upon creation of the component.
async created() {
try {
const response = await axios.get(`/cruise/${this.cruise.id}/vat_info`)
this.info = response.data
} catch (e) {
this.errors.push(e)
}
},
props: ['agreementId'],
computed: {
getTotalDistance () {
return this.info
},
When I render the HTML data by calling {{getTotalDistance}}, the output is as follows:
{ "disembs_vat": [ { "profile": ... , "write_access": true } ] ], "qualifying_voyages": [ { "end_wp_id": 23, "qualifying": false, "start_wp_id": 1 }, ... ] However, when attempting to manipulate the data within the computed function "getTotalDistance" and trying to return this.info.disembs_vat or make any modifications, I encounter the following error:
vue.runtime.esm.js?2b0e:1897 TypeError: Cannot read properties of null (reading 'disembs_vat')
at VueComponent.getTotalDistance (TaxesSection.vue?b2b5:43:1)
...
I have been unable to solve this issue... It seems to work when making small modifications and saving the changes but not when refreshing the page with F5.
Appreciate any help!