Saya mencoba melakukan sesuatu yang cukup sederhana. Saya meneruskan ID sebagai prop dari komponen induk dan kemudian mencoba memfilter larik "topik" di prop anak, hanya mengembalikan topik dengan ID yang sama.

Namun, memfilter array ini tidak berfungsi sama sekali. Bahkan menggunakan this.topics.filter(x => x); mengembalikan array kosong.

this.topics.forEach(x => console.log('working!') juga tidak akan mencatat apa pun.

this.topics.push("Some new Element") menyetel ulang larik sepenuhnya dan mengembalikan larik hanya termasuk "Some new Element".

console.log(this.topics) mengembalikan array penuh, kecuali saat menggunakan metode push sebelumnya - maka itu hanya mengembalikan Array "baru" yang berisi elemen yang didorong.

Itu tidak melempar kesalahan di konsol. Array tidak kosong, firestore mengisinya tanpa masalah (lihat tangkapan layar di bawah).

Saya sudah mencoba membuat larik lain di fungsi data() , hanya berisi string, untuk melihat apakah itu semacam kesalahan dalam file, tetapi memfilter larik "normal" berfungsi dengan baik.

this.topics hanya berisi objek, mungkin ini alasannya?

Mengisi array topik di kait yang dibuat dengan mendapatkan data dari firebase (Berfungsi tanpa masalah, lihat tangkapan layar di bawah)

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

Data saya() fungsi

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

Saya mati-matian mencoba memfilternya di kait yang dipasang (juga mencoba metode dan membuat kait)

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

Menggunakan this.topics.filter(x => x) Saya berharap mendapatkan salinan array 1:1, namun mengembalikan array kosong [].

Screenshot of the array via Vue dev-tools at runtime

0
Aside 29 Oktober 2019, 17:07

1 menjawab

Jawaban Terbaik

Setelah beberapa pemecahan masalah lagi saya akhirnya mendapatkan kode untuk bekerja. Terima kasih khusus kepada @TylerRoper karena menunjukkan bahwa masalahnya ada hubungannya dengan kode yang tidak sinkron. Saya berasumsi bahwa kait siklus hidup Vue juga digunakan untuk operasi asinkron, namun tidak demikian.

Saya memecahkan masalah dengan menambahkan properti tontonan:

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

Dan memperbarui data yang sesuai:

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

Dan menulis tindakan dalam metode yang dipanggil oleh salah satu properti jam tangan:

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

Semuanya bekerja sekarang. Terima kasih kepada semua orang yang membantu saya menyelesaikan pertanyaan pertama saya tentang Stack Overflow!

Jika seseorang menemukan cara yang lebih baik untuk menyelesaikan masalah, saya menantikan alternatif Anda.

0
aside 29 Oktober 2019, 15:51