How to get data from axios call in computed method to manipulate them?

Question

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!

Answer 1

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'