V-for on 2 seperate object arrays-CodePudding

I'm trying to output 10 news from an array called stories. This array contains info regarding the story. fx title, text, URL

But I'm also trying to output data on the author from that story that is stored in another array called authors. This array contains, author id, author score etc.

How do I accomplish this in Vue.js using the v-for method.

This is what I got for now:

 created: function (){
    axios.get('https://hacker-news.firebaseio.com/v0/topstories.json')
    .then((response) => {
      let results = response.data.slice(0,10)
      results.forEach(id => {
        axios.get('https://hacker-news.firebaseio.com/v0/item/'   id   '.json')
        .then((response) => {
          this.stories.push(response);
          let myAuthor = response.data.by;
              axios.get('https://hacker-news.firebaseio.com/v0/user/'   myAuthor   '.json')
              .then((myAuthors) => {
                this.authors.push(myAuthors);
              })
            .catch((err) => {
              this.err = err;
              alert("Error fetching authors "   err);
            })
              
        })
        .catch((err) => {
          this.err = err;
        })
      })
    })
    .catch((err) => {
      this.err = err;
    }); 

  },

and the HTML:

<template>
  <div >
    <div  v-for="story in sorted_stories" :key="story">
            <span >{{ story.data.score }}</span>
            <h2>Karma: {{ story.data.karma }}</h2>

            <a href="{ path: '/story/'   story.data.id }">{{ story.data.title }}<span>{{ story.data.url }}</span></a><br/>
            <span >
            by {{ story.data.by }} | {{ story.data.time }} | Story ID: {{ story.data.id }}
            </span><br>
    </div>
    <div v-for="author in authors" :key="author">
    <h1>ID {{ author.data.id }}</h1>
    <h1>Karma {{ author.data.karma }}</h1>
    </div>
  </div>
</template>

CodePudding user response：

If I understood you correctly you can create another v-for in authors v-for and filter stories for author:

new Vue({
  el: '#demo',
  data() {
    return {
      stories: [],
      authors: []
    }
  },
  methods: {
    storiesForAuthor(id) { //