VueJS - 如何在同一组件中的另一个 API 调用中使用一个 API 调用的响应

Question

这是我的场景，我试图在另一个 API 中使用来自一个 API 响应的 ID :

下面是Component.vue:

<template>
  <div class="Contents">
      <div class="vx-col" v-for="idea in ideas" v-bind:key="idea.id">
          <vx-card>
            ...
            <div>
              {{idea.name}} of {{idea.id}}
            </div>
            <div v-if="sum">
              {{sum.total}}
            </div>
            ...
          </vx-card>
     </div>
  </div>
</template>

<script>
...

async created () {

  await this.$http.get('/ideas')
    .then((response) => { this.ideas = response.data })
    .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)   //Here i am trying to give that id coming from the /ideas 
}
</script>

这是 console.log(response.data) 在 /ideas 中给出的内容：

不知道我哪里出错了，目前在我的控制台中我得到一个错误：

 /sum_of_ideas/undefined/everything // so here id coming from the /ideas should have been rendered.

为了清楚起见，我使用了 {{idea.id}} 的示例，每次循环时它只显示数字。

请在这方面帮助我，我想使用来自 /ideas 的响应，即 id 在另一个响应中，它是 /sum-of-ideas。

Answer 1

promise 和 async await 都用到了，只能用其中一个。在 created hook

中赋值 this.ideas 后执行 getSumOfIdeas

    <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>

Answer 2

当您调用 this.getSumOfIdeas(this.ideas.id) 时，您正在尝试访问不存在的 ideas 的 id。要么使用 this.getSumOfIdeas(this.ideas[0].id) 之类的东西来访问第一个对象的 id ，要么使用循环遍历这些想法并调用 this.getSumOfIdeas(this.ideas.id).

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

VueJS - 如何在同一组件中的另一个 API 调用中使用一个 API 调用的响应

VueJS - How to use the response of one API call in another API call in the same component

api

response

vue.js