Как получить доступ к данным только после их загрузки?

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 извлечения содержимого. Но когда я пытаюсь распечатать его с помощью: console.log(this.$get('questions')); на консоли Chrome, я вижу только пустой объект. Похоже, что он не загружается в момент его печати 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); 
    }); 
} 

Функция обратного вызова вызывается только тогда, когда вы получите ответ от сервера.