Методы Filter, forEach и Push не работают с массивом в Vue.

Question

Я пытаюсь сделать что-то довольно простое. Я передаю идентификатор в качестве подпорки из родительского компонента, а затем пытаюсь отфильтровать массив «themes» в дочерней подпорке, возвращая только тему с тем же идентификатором.

Однако фильтрация этого массива неработать на всех. Даже использование this.topics.filter(x => x); возвращает пустой массив.

this.topics.forEach(x => console.log('working!') также ничего не регистрирует.

this.topics.push("Some new Element") полностью сбрасывает массив и возвращает только массив, включающий "Some new Element".

console.log(this.topics) возвращает полный массив, за исключением случаев, когда ранее использовался метод push - тогда он возвращает только «новый» массив, содержащий элемент push.

Он не выдает ошибок в консоли. Массив не пустой, Firestore заполняет его без проблем (см. Скриншот ниже).

Я попытался создать еще один массив в функции data (), содержащий только строки, чтобы проверить, является ли он каким-либоошибки в файле, но фильтрация «обычных» массивов работает просто отлично.

this.topics содержит только объекты, может, в этом причина?

Заполнение массива тем в созданном хукеполучение данных из firebase (работает без проблем, см. скриншот ниже)

    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(), // <= that´s an object
                  topic_id: doc.id,
                  sectionOfTopic_id: sec.id
              // And ends here




                })
              })
            })
        } else {
          return;
        }
      })
    })

Функция My data ()

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

Я отчаянно пытаюсь отфильтровать их в подключенном хуке(также пробовал в методах и создал ловушку)

  mounted() {

    console.log(this.topics)
    let preview = this.topics.filter(x => x)
    console.log(this.topics)
    console.log(preview)
}

Используя this.topics.filter(x => x) Я ожидал бы получить копию массива 1: 1, однако он возвращает пустой массив [].

Answer 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()
}

И соответственно обновил данные:

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

и записал действия в методе , вызываемом одним из свойств наблюдения :

    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)
}

Теперь все работает. Спасибо всем, кто помог мне разобраться с моим первым вопросом о переполнении стека!

Если кто-то найдет лучший способ решить проблему, я с нетерпением жду вашей альтернативы.