fetch the data from multiple api - axios and get it in the page on load vue.js 3

Question

I want to fetch the data from multiple API with axios in Vue.js 3. The backend is Laravel API.

I am able to get data on response1.data and response2.data on console but how can I assign this data to the object defined on data() function of Vue.js.

I need this data to load on page on loaded. The Vue.js code is -

<script>
export default {
  name:'Followup',
  data() {
    return {
      patient:{},
      labGroup:{},
    }
  },
  created() {     
    this.$axios.get('/sanctum/csrf-cookie').then(response => {
      this.$axios.all([
        this.$axios.get(`/api/patients/showSomeDetails/${this.$route.params.id}`),
         this.$axios.get('/api/labitems/getGroup')
      ])
      .then(this.$axios.spread(function (response1, response2) {
          console.log(response1.data) // this has given result on console. 
          this.patient = response1.data  // It is giving error on console. => TypeError: Cannot set property 'patient' of null
          this.labGroup = response2.data // same
          console.log(response2.data)

        }))
        .catch(function (error) {
           console.error(error);
        });

        })
    },
computed() {
},
methods: {
}
} 
</script>

I got error on console - this- app.js:20666 TypeError: Cannot set property 'patient' of null

How can I assign data to the patient and labGroup, so it will applied to my webpage via v-model

This is my patient followup up form, where I need to get the patient details from patient table, and labitems to fill lab reports from labitems table.

I hope, someone will give me a solution for this.

score 1 · Accepted Answer · answered Jun 09 '21 at 18:57

1

Accessing this in function (response1, response2) { wont be the vue instance.

Either use an arrow function or bind this to the function (response1, response2) { ... }.bind(this)

answered Jun 09 '21 at 18:57

Lawrence Cherone

46,049
7
62
106

It worked with both arrow function and or with normal function and adding bind.this. – Kamal Kunwar Jun 10 '21 at 03:28

score 0 · Answer 2 · edited Jul 16 '22 at 03:50

First Option:

You can use watch property of vue.js and before rendering patient property you need add v-if as below so that it won't be rendered on DOM until it has some truthy value.

template:

<div v-if="patient">{{patient}} </div>

script:

watch: {
    // whenever patient changes, this function will run
    patient: function (newValue, oldValue) {
      this.patient= newValue;
    }
  }

Second Option: Wrap your get calls inside getPatient method by awaiting it render patient once data is bound to it.

template:

<div v-if="patient">{{patient}} </div>

<script>
export default {
    name: 'Followup',
    data() {
        return {
            patient: null,
            labGroup: null,
        };
    },
    created() {
        await this.getPatient();
    },
    computed() {},
    methods: {
        async getPatient() {
            await this.$axios.get('/sanctum/csrf-cookie').then((response) => {
                this.$axios
                    .all([this.$axios.get(`/api/patients/showSomeDetails/${this.$route.params.id}`), this.$axios.get('/api/labitems/getGroup')])
                    .then(
                        this.$axios.spread(function (response1, response2) {
                            console.log(response1.data); // this has given result on console.
                            this.patient = response1.data; // It is giving error on console. => TypeError: Cannot set property 'patient' of null
                            this.labGroup = response2.data; // same
                            console.log(response2.data);
                        })
                    )
                    .catch(function (error) {
                        console.error(error);
                    });
            });
        },
    },
};
</script>

fetch the data from multiple api - axios and get it in the page on load vue.js 3

2 Answers2