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

Hello, 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 to the patient and 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.

bhojkamal

4 years ago

Best Answer

Level 1

I found the solution for this.

It can be done in two way, one - adding bind.this another using arrow function.

.then(this.$axios.spread(function (response1, response2) {
          console.log(response1.data) // this has given result on console. 
          this.patient = response1.data  // now working 
          this.labGroup = response2.data // same
          console.log(response2.data)

        }.bind(this)))

Or using using arrow function.

1 like

Please or to participate in this conversation.