[Vuejs]-VueJS – How to use the response of one API call in another API call in the same component

by

1👍

✅

When you are calling this.getSumOfIdeas(this.ideas.id) you are trying to access id of ideas which does not exist. Either use something like this.getSumOfIdeas(this.ideas[0].id) to access id of the first object or use a loop to iterate over the ideas and call this.getSumOfIdeas(this.ideas.id).

this.ideas.forEach(idea => this.getSumOfIdeas(idea.id))

1👍

promise and async await both are used, use any one only.
execute getSumOfIdeas after assigning this.ideas which is in created hook

    <template>
      <div class="Contents">
          <div class="vx-col" v-for="idea in ideas" v-bind:key="idea.id">
            ...
            <div>
              {{idea.name}} of {{idea.id}}
            </div>
            <div v-if="sum">
              {{sum.total}}
            </div>
            ...
         </div>
      </div>
    </template>
    
    <script>
    ...
    
    created () { // remove async and await
    
       this.$http.get('/ideas')
        .then((response) => {
            this.ideas = response.data;
            this.getSumOfIdeas(this.ideas.id);  // Do this here after assigning ideas
         })
        .catch((error) => { console.log(error) })
    },
    methods: {
    
      getSumOfIdeas(id){
        this.$http.get('/sum_of_ideas/'+ id +'/everything')
          .then((response) => { this.sum = response.data })
          .catch((error) => {console.log(error)})
      }
    },
    mounted (){
      // this.getSumOfIdeas(this.ideas.id)   // move to created 
    }
    </script>

Leave a comment