Populate table in Vue template component from rest api
<p>I have a Vue component where I am trying to get rest api (using axios) data to populate a table. The rest call returns a valid json string in chrome. However, I can't get it to populate the table in the template. When I run the view, I get the following error in the rest call:</p>

<blockquote>
  <p>TypeError: Cannot set property 'courses' of undefined</p>
</blockquote>

<p>Here is the json being returned:</p>

<blockquote>
  <p>[{"CourseId":"architecture","AuthorId":"cory-house","Title":"Architecting
  Applications","CourseLength":"4:20","Category":"Software Architecture
  Test"}]</p>
</blockquote>

<p>Here is my template:</p>

<pre><code>&lt;template&gt;
  &lt;div class="course-list-row"&gt;
    &lt;tr v-for="course in courses"&gt;
        &lt;td&gt;{{ course.CourseId }}&lt;/td&gt;
        &lt;td&gt;{{ course.AuthorId }}&lt;/td&gt;
        &lt;td&gt;{{ course.Title }}&lt;/td&gt;
        &lt;td&gt;{{ course.CourseLength }}&lt;/td&gt;
        &lt;td&gt;{{ course.Category }}&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
  import axios from 'axios'
  export default {
    name: 'course-list-row',
    mounted: function () {
      this.getCourses()
      console.log('mounted: got here')
    },
    data: function () {
      return {
        message: 'Course List Row',
        courses: []
      }
    },
    methods: {
      getCourses: function () {
        const url = 'https://server/CoursesWebApi/api/courses/'
        axios.get(url, {
          dataType: 'json',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
          },
          mode: 'no-cors',
          credentials: 'include'
        })
        .then(function (response) {
          console.log(JSON.stringify(response.data))
          this.courses = JSON.stringify(response.data)
        })
        .catch(function (error) {
          console.log(error)
        })
      }
    }
  }
&lt;/script&gt;
</code></pre>

<p><strong>Edit:</strong></p>

<p>It appears the "this" of this.courses in the api callback function is undefined.</p>