Javascript 筛选器、forEach和Push方法在Vue prop中的数组上不起作用

我正在尝试做一些非常简单的事情。 我将ID作为道具从父组件传递，然后尝试过滤子道具中的“主题”数组，只返回具有相同ID的主题

但是，筛选此数组根本不起作用。 甚至使用

this.topics.filter（x=>x）返回一个空数组

this.topics.forEach（x=>console.log（'working！'）
也不会记录任何内容

this.topics.push（“某些新元素”）
完全重置数组，并返回仅包含
“某些新元素”的数组

console.log（this.topics）
返回完整数组，以前使用push方法时除外-然后它只返回包含push元素的“新”数组

它不会在控制台中抛出错误。数组不是空的，firestore会毫无问题地填充它（请参见下面的屏幕截图）

我尝试在data（）函数中创建另一个数组，只包含字符串，以查看文件中是否存在某种错误，但过滤“正常”数组效果很好

this.topics
只包含对象，可能这就是原因吧

通过从firebase获取数据来填充创建的钩子中的topics数组
（工作正常，请参见下面的屏幕截图）

我拼命想让它在挂载的钩子中过滤（也尝试了方法并创建了钩子）

使用
this.topics.filter（x=>x）
我希望得到数组的1:1副本，但是它返回一个空数组
[]

经过更多的故障排除，我终于让代码正常工作了。
特别感谢@TylerRoper指出问题与代码异步有关。
我假设Vue生命周期挂钩也用于异步操作，但情况并非如此

我通过添加手表属性解决了这个问题：

  watch: {
topics: function (val) {
  this.topReady = true;
  if(this.topReady && this.secReady){
    this.allReady = true
  }
},
sections: function (val) {
  this.secReady = true;
  if(this.topReady && this.secReady){
    this.allReady = true
  }
},
allReady: function (val) {
  return this.loadPreview()
}

    loadPreview() {
  // Set previewSpecs
  let preview = this.topics.filter(top => this.previewSpecs.topic_id==top.topic_id)
  let previewSotId = preview[0].sectionOfTopic_id
  let previewSec = this.sections.filter(sec => sec.section_id==previewSotId);


  this.selected = previewSotId;
  this.choose(preview[0].topic_id, false, preview[0].sectionOfTopic_id, previewSec[0].data.name)
}

并相应地更新了数据：

  data() {
return {
  courseTitle: null,
  sections: [],
  topics: [],
  selected: undefined,
  topReady: false,
  secReady: false,
  allReady: false
}

并将操作写入由一个监视属性调用的方法：

  watch: {
topics: function (val) {
  this.topReady = true;
  if(this.topReady && this.secReady){
    this.allReady = true
  }
},
sections: function (val) {
  this.secReady = true;
  if(this.topReady && this.secReady){
    this.allReady = true
  }
},
allReady: function (val) {
  return this.loadPreview()
}

    loadPreview() {
  // Set previewSpecs
  let preview = this.topics.filter(top => this.previewSpecs.topic_id==top.topic_id)
  let previewSotId = preview[0].sectionOfTopic_id
  let previewSec = this.sections.filter(sec => sec.section_id==previewSotId);


  this.selected = previewSotId;
  this.choose(preview[0].topic_id, false, preview[0].sectionOfTopic_id, previewSec[0].data.name)
}

现在一切都好了。谢谢大家帮助我解决了我第一个关于堆栈溢出的问题

如果有人找到更好的方法来解决这个问题，我期待着你的替代方案。
你的
主题
数组似乎是空的。请检查一下。在空数组中运行
过滤器
或
forEach
会返回一个空数组add
控制台。在你的各种
获取（）之后记录
s）
并查看错误所在阵列不是空的，它成功地从firebase获取了所有信息，我在运行时发布了阵列的屏幕截图。不要使用
console.log（this.topics）
检查阵列的内容。这会产生误导，尤其是在处理异步代码时。相反，请使用
console.log（JSON.stringify（this.topics））
。听起来，在检查数组内容之前，您并没有等待异步代码完成。您看到填充数组的原因可能是记录数组（与stringized版本相反）将惰性地进行计算，而字符串化则在该行显示数组内容的准确版本。使用
console.log（JSON.stringify（this.topics））
它记录
[]
每次，但我从创建的钩子中的数据库中获取所有数据，并且只将其记录在挂载的钩子中，所以我还需要进一步抵消“过滤”吗？我该怎么做？
    loadPreview() {
  // Set previewSpecs
  let preview = this.topics.filter(top => this.previewSpecs.topic_id==top.topic_id)
  let previewSotId = preview[0].sectionOfTopic_id
  let previewSec = this.sections.filter(sec => sec.section_id==previewSotId);


  this.selected = previewSotId;
  this.choose(preview[0].topic_id, false, preview[0].sectionOfTopic_id, previewSec[0].data.name)
}