Soy nuevo en programación y estoy haciendo un proyecto universitario con Vuejs en el que tengo que crear un sitio web con el uso de una API (estoy usando google books) y google firestore en el que quiero almacenar el 'id ' de los libros que se establecen como "favoritos" del usuario.

Quiero ejecutar la función load() cuando se carga la página, el problema es que la función deja de ejecutarse después de la ejecución de console.log("var favs", favs) es decir:

 var favs [0: {id: '4dvptppOG8MC'}, 1: {id: '9CJWTbd-RYoC'}, 2: {id: 'HdRNzQEACAAJ'}, 3: {id: 'ayOd_Lu7m_MC'}, 4: {id: 'tp9svQEACAAJ'}, ]

Pero me gustaría tener algo impreso por línea, de forma separada y no como una matriz, porque, después, tengo que comparar cada 'id' con otra variable.

Este es el código:

 created: function () { this.load(); }, methods: { load() { var favs = []; favs = DataService.getFav(); console.log("var favs", favs); favs.forEach((item) => { console.log("item.id: ", item.id); }); },

No sé si podría ser útil, pero este es el código de DataService.getFav()

 getFav: function () { var username = localStorage.getItem("username"); var colName = username + "fav"; var favs = []; db.collection(colName) .get() .then((response) => { response.forEach((doc) => { favs.push(doc.data()); }); }); return favs; }