I do a call with axios to get data like this:
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: []
}
},
// Fetches posts when the component is created.
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 display the data in HTML by calling {{getTotalDistance}}
I got this:
{ "disembs_vat": [ { "profile": { "address_country": { "iso": "FR", "name": "France" }, "company_name": null, "company_reg_country": null, "date_of_birth": null, "full_name": "Paul Sernine", "id": 3, "initials": "PS", "is_new": false, "locked": false, "passport_country": { "iso": "FR", "name": "France" }, "profile_name": "Alt Profile #1", "version": 0, "write_access": true }, "voyages": [ { "country": "FRA", "distance": 15.916673872587964, "vat": 0.1 }, { "country": "international", "distance": 80.3050348237542, "vat": 0 }, { "country": "COR", "distance": 18.244668116382755, "vat": 0.021 } ] }, { "profile": { "address_country": null, "company_name": null, "company_reg_country": null, "date_of_birth": null, "full_name": "Robert Neverconnected", "id": 9, "initials": "RN", "is_new": false, "locked": false, "passport_country": null, "profile_name": null, "version": 0, "write_access": true }, "voyages": [ { "country": "FRA", "distance": 9.13255133078821, "vat": 0.1 } ] }, { "profile": { "address_country": null, "company_name": null, "company_reg_country": null, "date_of_birth": null, "full_name": "test ttete", "id": 11, "initials": "tt", "is_new": false, "locked": false, "passport_country": null, "profile_name": "Created by Arsène Lupin", "version": 0, "write_access": true }, "voyages": [ { "country": "international", "distance": 1001.8276448564677, "vat": 0 } ] } ], "qualifying_voyages": [ { "end_wp_id": 23, "qualifying": false, "start_wp_id": 1 }, { "end_wp_id": 26, "qualifying": true, "start_wp_id": 23 }, { "end_wp_id": 32, "qualifying": true, "start_wp_id": 26 } ], "total_distance": 1125.4265729999809, "vat_prorata": [ { "distance": 25.049225203376174, "vat": 0.1 }, { "distance": 1082.1326796802218, "vat": 0 }, { "distance": 18.244668116382755, "vat": 0.021 } ] }
But I want to manipulate the data on computed fonction "getTotalDistance" and when I tried to return this.info.disembs_vat
or manipulate the data I got this error:
vue.runtime.esm.js?2b0e:1897 TypeError: Cannot read properties of null (reading 'disembs_vat')
at VueComponent.getTotalDistance (TaxesSection.vue?b2b5:43:1)
at Watcher.get (vue.runtime.esm.js?2b0e:4495:1)
at Watcher.evaluate (vue.runtime.esm.js?2b0e:4597:1)
at VueComponent.computedGetter [as getTotalDistance] (vue.runtime.esm.js?2b0e:4851:1)
at Object.get (vue.runtime.esm.js?2b0e:2081:1)
at Proxy.render (TaxesSection.vue?ec96:7:1)
at Vue._render (vue.runtime.esm.js?2b0e:3569:1)
at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4081:1)
at Watcher.get (vue.runtime.esm.js?2b0e:4495:1)
at new Watcher (vue.runtime.esm.js?2b0e:4484:1)
And I can't figure it out... When I reload the html by modifying something and save it works but when I relaod the page with F5 it doesn't.
Thanks a lot!
CodePudding user response:
Before your request returns (and populates this.info
), this.info
is null
.
The error is telling you null
does not have a disembs_vat
property. Which is true.
Use optional chaining to return the value of this.item.disembs_vat
when item
is not falsy and undefined
when item
is falsy:
<script>
export default {
// ...
computed: {
vat() {
return this.item?.disembs_vat
}
}
// ...
}
</script>
<template>
<pre v-text="{ vat }" />
</template>
If you don't want undefined
when the item is null
, provide a default value like this:
this.item?.disembs_vat || 'default value here'