Question

我有Vue.extend：

data: function ()  {
  return {
     questions: []
  }

  },
  ready() 
  { 
    this.getQuestionsContent(),
    this.foo()
  },
  methods: 
  {

     getQuestionsContent()
     {
        this.$http.get('http://127.0.0.1:8080/js/questions.json').then(function(response)
        {
          this.questions = response.data;

        }); 

      },
      foo()
      {
        console.log(this.$get('questions'));
      }

  }

getQuestionsContent检索内容。但是，当我尝试在Chrome控制台上使用：console.log(this.$get('questions'));进行打印时，我只看到空对象。它似乎是在用console.log打印它时没有加载的。我该如何解决？

Answer 1

您的回调函数未在vue组件的范围内运行。您需要将this绑定到该函数，以便设置this.questions：

this.$http.get('http://127.0.0.1:8080/js/questions.json').then(function(response)
    {
      this.questions = response.data;

    }.bind(this));

在异步请求的回调函数之前，您将无法访问这些问题。因此，在发送请求后立即调用this.foo()将不会显示数据。

Answer 2

尝试使用异步功能。也许是这样的：

this.getQuestionsContent(function(questions) {
    console.log(questions);
})

与

getQuestionsContent(callback) {
    this.$http.get('http://127.0.0.1:8080/js/questions.json').then(function(response)
    {
        callback(response.data);
    }); 
}

仅当您从服务器获得响应时才会调用回调函数。

如何在加载数据后才能访问数据？

2 个答案: