I am attempting a relatively simple task. The parent component passes an ID as a prop to the child component, which then tries to filter the "topics" array to only return the topic with the same ID.
However, filtering this array is proving futile.
Even using this.topics.filter(x => x); results in an empty array.
The line
this.topics.forEach(x => console.log('working!')this.topics.push("Some new Element")console.log(this.topics) displays the full array, except when using the push method - in that case, it shows only the "new" Array with the pushed element.
No errors are thrown in the console. The array is not empty; Firestore populates it without issues (refer to the screenshot below).
To investigate if there was an error within the file, I attempted creating another array in the data() function containing only strings. Filtering "normal" arrays works perfectly fine.
this.topics consists solely of objects – could this be the cause?
Filling the topics array in the created hook by fetching data from Firebase works flawlessly (Check out the screenshot below for confirmation)
db.collection("courses").doc(this.$route.params.course_id).collection("sections")
.get()
.then(snapshot => {
snapshot.forEach(sec => {
if (this.topics.length == 0) {
db.collection("courses").doc(this.$route.params.course_id).collection("sections").doc(sec.id).collection("topics").orderBy("order")
.get()
.then(snapshot => {
snapshot.forEach(doc => {
// Magic starts here.
this.topics.push({
data: doc.data(),
topic_id: doc.id,
sectionOfTopic_id: sec.id
// And ends here
})
})
})
} else {
return;
}
})
})
The data() function:
data() {
return {
courseTitle: null,
sections: [],
topics: [],
selected: undefined
}
}
Efforts to filter the array in the mounted hook (also tried in methods and created hook)
mounted() {
console.log(this.topics)
let preview = this.topics.filter(x => x)
console.log(this.topics)
console.log(preview)
}
When using this.topics.filter(x => x), one would expect a direct copy of the array, but it returns an empty array [].