从 rest api 填充 Vue 模板组件中的表

Populate table in Vue template component from rest api(从 rest api 填充 Vue 模板组件中的表)

问题描述

我有一个 Vue 组件，我试图在其中获取 rest api(使用 axios)数据来填充表格.其余调用在 chrome 中返回一个有效的 json 字符串.但是，我无法让它填充模板中的表格.当我运行视图时，我在 rest 调用中收到以下错误:

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:

TypeError: 无法设置未定义的属性课程"

TypeError: Cannot set property 'courses' of undefined

这是返回的 json:

Here is the json being returned:

[{"CourseId":"architecture","AuthorId":"cory-house","Title":"Architecting应用程序","CourseLength":"4:20","Category":"软件架构测试"}]

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

这是我的模板:

<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>

api回调函数中this.courses的this"好像是未定义的.

It appears the "this" of this.courses in the api callback function is undefined.

推荐答案

你已经编辑了，你得到了正确的错误，这个范围在 axios.get 里面已经改变了，你需要做以下更改:

as you have edited, you have got the correct error, scope of this has changed inside axios.get, you need to make following changes:

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

这篇关于从 rest api 填充 Vue 模板组件中的表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！