mercredi 29 juillet 2020

Changing object property through $set gives:" TypeError: Cannot read property 'call' of undefined "

First of all, hello.

I'm relatively new to web development and Vue.js or Javascript. I'm trying to implement a system that enables users to upload and vote for pictures and videos. In general the whole system worked. But because i got all of my information from the server, the objects used to show the files + their stats wasn't reactive. I tried to change the way i change the properties of an object from "file['votes'] ) await data.data().votes" to "file.$set('votes', await data.data().votes)". However now i'm getting the TypeError: Cannot read property 'call' of undefined Error. I have no idea why this happens or what this error even means. After searching a lot on the internet i couldn't find anybody with the same problem. Something must be inheritly wrong with my approach.

If anybody can give me an explanation for what is happening or can give me a better way to handle my problem, I'd be very grateful.

Thanks in advance for anybody willing to try. Here is the Code section i changed:

async viewVideo() {
  this.videoURLS = []
  this.videoFiles = []
  this.videoTitels = []
  var storageRef = firebase.storage().ref();
  var videourl = []
  console.log("try")
  var listRef = storageRef.child('User-Videos/');
  var firstPage = await listRef.list({
    maxResults: 100
  });
  videourl = firstPage
  console.log(videourl)
  if (firstPage.nextPageToken) {
    var secondPage = await listRef.list({
      maxResults: 100,
      pageToken: firstPage.nextPageToken,
    });
    videourl = firstPage + secondPage

  }
  console.log(this.videoURLS)
  if (this.videoURLS.length == 0) {
    await videourl.items.map(async refImage => {

      var ii = refImage.getDownloadURL()
      this.videoURLS.push(ii)
    })

    try {
      await this.videoURLS.forEach(async file => {

        var fale2 = undefined
        await file.then(url => {
          fale2 = url.substring(url.indexOf("%") + 3)
          fale2 = fale2.substring(0, fale2.indexOf("?"))
        })
        await db.collection("Files").doc(fale2).get().then(async data => {
          file.$set('titel', await data.data().titel)
          file.$set('date', await data.data().date)
          if (file.$set('voted', await data.data().voted)) {
            file.$set('voted', [])
          }
          file.$set('votes', await data.data().votes)
          if (file.$set('votes', await data.data().votes)) {
            file.$set('votes', 0)
          }
          await this.videoFiles.push(file)
          this.uploadDate = data.data().date
          console.log(this.videoFiles)
          this.videoFiles.sort(function(a, b) {
            return a.date - b.date;
          })
        })
      })
    } catch (error) {
      console.log(error)
    }
  }
},
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>



Aucun commentaire:

Enregistrer un commentaire