Блог

Я пытаюсь получить данные json из XMLHttpRequest, и это работает хорошо, поэтому я вижу данные в консоли. Но компонент, который должен показывать эти данные, не показывает никаких… Что-то не так? Может быть, неправильно вызывать функцию в mounted()? Я также вызвал это в created (), но ничего не изменилось… Есть идеи?

в скрипте

     data(){
       return{
        json: {}
       }
    }

    mounted(){
     var gsRef = firebase.storage().refFromURL('XXXXXXXXX')
   gsRef.child(firebase.auth().currentUser.uid '.json').getDownloadURL().then(function(url){
            var xhr = new XMLHttpRequest()
            xhr.responseType = 'json'
            xhr.onload = function() {
              this.json = xhr.response
              console.log(this.json.user) //works shows the data!
            }
            xhr.open('GET',url)
            xhr.send()
          })
      }
  

в шаблоне

 <h1>{{json.user}}</h1> //doenst work. Cannot access data
  

«это», вероятно, относится к неправильному контексту (т. Е. не к экземпляру vue). Попробуйте сохранить ссылку на соответствующий, this перед вашим вызовом firebase, что-то вроде const self = this , а затем используйте self.json для установки данных.

 mounted(){
     var self = this
     var gsRef = firebase.storage().refFromURL('XXXXXXXXX')
   gsRef.child(firebase.auth().currentUser.uid '.json').getDownloadURL().then(function(url){
            var xhr = new XMLHttpRequest()
            xhr.responseType = 'json'
            xhr.onload = function() {
              self.json = xhr.response
              console.log(self.json.user) //works shows the data!
            }
            xhr.open('GET',url)
            xhr.send()
          })
      }