Why the array is initialized from the server in the method mount, but not displayed with the Directive v-for?

Good day.

In the application the following markup:

<div id="app">

the <ul>
 <li v-for="i in info">
 {{ i.title }}
</li>
</ul>
</div>


VUE code:

new Vue({
 el: '#app',
 data() {
 return {
 info: null
};
},
 mounted() {
axios({
 method: 'POST',
 headers: {'Content-Type': 'application/x-www-form-urlencoded'},
 url: 'http://local/get-item',
 }).then(function (response) {
 this.info = response.data;
});
 }


When you run the page nothing happens.

On the server for the test array is generated as follows:

$lessons[0] = [
 'title' => 'Description 1',
 'description' => 'Title 1',
];

 $lessons[1] = [
 'title' => 'Description 2',
 'description' => 'Title 2',
];

 echo json_encode($lessons);


To the front comes in this form:
5ccd9af5f3c44563990403.png
March 20th 20 at 11:46
1 answer
March 20th 20 at 11:48
Solution
The context is lost, this when processing the response - not the vue instance.

Change function (response) { for (response) => {.
Thank you, great human! I'm with JS is not very friendly, under the project useful. Correctly I understand, I'm here broke it the design of the JS and not the VUE?

Although in essence, that this case is just colbecki, only the second arrow. How I could retrieve the context? - sigmund76 commented on March 20th 20 at 11:51
@jamal, you understand correctly. About "return context" can read here. - Trycia.Raynor commented on March 20th 20 at 11:54

Find more questions by tags Vue.js