title: Populate table in Vue template component from rest api
body: <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>