V-for 在 2 个单独的 object 数组上

Question

我正在尝试从名为 stories 的数组中输出 10 条新闻。该数组包含有关故事的信息。 fx 标题，文本，URL

但我还试图从存储在另一个名为 authors 的数组中的那个故事中输出有关作者的数据。该数组包含，作者id，作者分数等

如何使用 v-for 方法在 Vue.js 中完成此操作。

这是我现在得到的：

 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;
    }); 

  },

和 HTML:

<template>
  <div class="container">
    <div class="storyContainer" v-for="story in sorted_stories" :key="story">
            <span class="score">{{ 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 class="meta">
            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>

Answer 1

如果我的理解正确，您可以在作者 v-for 中创建另一个 v-for 并为作者过滤故事：

new Vue({
  el: '#demo',
  data() {
    return {
      stories: [],
      authors: []
    }
  },
  methods: {
    storiesForAuthor(id) { //  method to filter stories for author id
      return this.stories.filter(s => s.data.by === id)
    }
  },
  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;
    }); 
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.26.1/axios.min.js" integrity="sha512-bPh3uwgU5qEMipS/VOmRqynnMXGGSRv+72H/N260MQeXZIK4PG48401Bsby9Nq5P5fz7hy5UGNmC/W1Z51h2GQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="demo">
  <div class="container">
    <div v-for="author in authors" :key="author.id">
      <h3>ID {{ author.data.id }}</h3>
      <h5>Karma {{ author.data.karma }}</h5>
                                           <!--  inner v-for for filtering stories -->
      <div class="storyContainer" v-for="story in storiesForAuthor(author.data.id)" :key="story.id">
        <span class="score">{{ 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 class="meta">
        by {{ story.data.by }} | {{ story.data.time }} | Story ID: {{ story.data.id }}
        </span><br>
      </div>
      <hr />
    </div>
  </div>
</div>

V-for 在 2 个单独的 object 数组上

V-for on 2 seperate object arrays

javascript

vue.js

vuejs2