Estoy tratando de generar 10 noticias de una matriz llamada historias. Esta matriz contiene información sobre la historia. título fx, texto, URL
Pero también estoy tratando de generar datos sobre el autor de esa historia que se almacena en otra matriz llamada autores. Esta matriz contiene la identificación del autor, la puntuación del autor, etc.
¿Cómo logro esto en Vue.js usando el método v-for ?
Esto es lo que tengo por ahora:
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; }); },y el 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>Si te entendí bien puedes crear otro v-for en autores v-for y filtrar historias por autor:
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>