V-for在2個單獨的物件陣列上

我正在嘗試從一個名為 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>

uj5u.com熱心網友回復：

如果我理解正確，您可以在作者 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>

uj5u.com熱心網友回復：

我要問的第一個問題是陣列中的屬性是什么stories將有助于識別相關的author. 讓我們假設它類似于author_id（您已經確認了它的“by”，但為了更清楚，我將使用我的版本）。

以下是我通常會如何進行此類作業（假設您使用的是 Vue2/Options API）。

data() {
  return {
    stories: [],
    authors: []
  }
}

在created鉤子上填寫stories和authors資料。

// Some API code here
this.stories = response.stories
this.authors = response.authors

填寫完陣列后，使用一個計算屬性映射兩個陣列并回傳一個組合陣列：

computed: {
  storiesAndAuthorsCombined() {
    return this.stories.map(story => ({
      title: story.title,
      text: story.text,
      url: story.url,
      author: this.authors.find(author => author.id === story.author_id)
    })
   )
  }
}

最后在模板中：

<div v-for="(story, $story) in storiesAndAuthorsCombined" :key="$story">
 <pre>{{ story }}</pre>
</div>

邊注

您的 API 呼叫相當復雜，并且可能效率低下。

最好先獲取您的故事，然后確定您需要的作者，然后再打一次電話。該 API 可能不存在，但值得研究。

另外……考慮一下可能有作者寫過多個故事的情景。所以你呼叫了兩次相同的資訊，這對資源的使用更加低效。

created() {
  axios.get('https://hacker-news.firebaseio.com/v0/topstories.json').then((res) {
   this.stories = res.data

   const author_ids = [ ...new Set(this.stories.map(({ by }) => by)) ];
   
   axios.get(`/authors?=${author_ids}`) // hopefully something like this exists?
    .then(res => this.authors = res.data)
  }).catch(e => console.log('Error', e))
}

標籤：javascript Vue.js Vuejs2

上一篇： =顯示全部，=只顯示單個專案

下一篇：Unixshell-在一個檔案夾下查找所有不同型別的檔案擴展名