Блог

Вот мой сценарий, я пытаюсь использовать идентификатор, полученный из одного ответа API, в другом API :

Ниже приведен 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 ie id в другом ответе, вот он /sum-of-ideas .

Когда вы вызываете this.getSumOfIdeas(this.ideas.id) , вы пытаетесь получить доступ id ideas к тому, чего не существует. Либо используйте что-то вроде this.getSumOfIdeas(this.ideas[0].id) доступа id к первому объекту, либо используйте цикл для перебора идей и вызова this.getSumOfIdeas(this.ideas.id) .

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

используются оба promise и async await, используйте только любой. выполнить getSumOfIdeas после назначения this.ideas , которое находится в 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>