Question

我正在尝试从XMLHttpRequest获取json数据，并且它运行良好，所以我在控制台中看到了数据。但是应该显示这些数据的组件没有显示任何信息...有什么问题吗？在mount（）中调用函数也许是错误的？我也用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

Answer 1

“此”可能是指错误的上下文（即不是vue实例）。尝试在调用Firebase之前保存对正确的this的引用，类似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()
          })
      }

无法访问组件中的json数据

1 个答案: