vue-component - example - vue props default

Rellene la tabla en el componente de plantilla Vue desde el api de reposo

Question

Tengo un componente Vue en el que trato de obtener datos api de reposo (usando axios) para completar una tabla. La llamada al resto devuelve una cadena json válida en cromo. Sin embargo, no puedo hacer que llene la tabla en la plantilla. Cuando ejecuto la vista, aparece el siguiente error en la llamada de reposo:

TypeError: no se puede establecer la propiedad ''cursos'' de indefinido

Aquí está el json siendo devuelto:

[{"CourseId": "architecture", "AuthorId": "cory-house", "Title": "Aplicaciones de arquitectura", "CourseLength": "4:20", "Categoría": "Prueba de arquitectura de software"}]

Aquí está mi plantilla:

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

<script>
  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)
        })
      }
    }
  }
</script>

Editar:

Parece que "esto" de esto. Los cursos en la función de devolución de llamada de la API no están definidos.

Answer 1

como ha editado, tiene el error correcto, el alcance de esto ha cambiado dentro de axios.get , necesita hacer los siguientes cambios:

methods: {
  getCourses: function () {
    var self = this
    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))
      self.courses = response.data
    })
    .catch(function (error) {
      console.log(error)
    })
  }
}