javascript - 无法访问组件中的 json 数据

Question

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

标签： javascriptvue.js

Answer 1

“this”可能指的是错误的上下文（即不是 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()
          })
      }