VueJS не отображает данные таблицы - PullRequest
Новая
       5

VueJS не отображает данные таблицы

0 голосов
/ 11 января 2020

Я хочу отображать данные из API, который я создал ранее, используя VueJS 2. Мой блок кода VueJS не отображает данные, которые я отправил через бэкэнд-сервисы. Консоль отладки не возвращает ошибок. Vue Расширение отладки для Firefox успешно возвращает данные таблицы. Но я не могу отобразить данные в таблице HTML. Вот блок кода:

Курсы. vue файл: 

<template>
  <div class="container">
    <h3>Courses:</h3>
    <table class="table">
      <thead>
        <tr>
          <th scope="col">Id</th>
          <th scope="col">Name</th>
          <th scope="col">Language</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="course in courses" v-bind:key="course.ID"> 
          <th scope="row">{{course.ID}}</th>
          <td>{{course.name}}</td>
          <td>{{course.language}}</td>
        </tr>
      </tbody>
    </table> 
  </div> 
</template>

<script>
  import axios from 'axios';

  export default {
    name: 'Courses',
    data() {
      return {
        courses: null,
      };
    },
    created: function() {
      axios
        .get('http://localhost:8080/api/index')
        .then(res => {
          this.courses = res.data;
        })
    }
  }
</script>

<style>
  h3 {
    margin-bottom: 5%;
  }
</style>

Приложение. vue файл: 

<template>
  <div id="app">
    <Courses />
  </div>
</template>

<script>
import Courses from './components/Courses.vue'

export default {
  name: 'app',
  components: {
    Courses
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Мой результат API: 

// 20200111185700
// http://localhost:8080/api/index

{
  "Courses": [
    {
      "ID": 16,
      "Name": "Math",
      "Language": "en"
    },
    {
      "ID": 15,
      "Name": "Biology",
      "Language": "en"
    },
}

Ответы [ 2 ]

1 голос
/ 11 января 2020

Похоже, что результат API не в правильном формате. Вам не хватает скобки ] вокруг данных курсов.

Я думаю, что это должно выглядеть примерно так 

{
  "Courses": [
    {
      "ID": 16,
      "Name": "Math",
      "Language": "en"
    },
    {
      "ID": 15,
      "Name": "Biology",
      "Language": "en"
    },
   ],
}

Также обратите внимание, что когда вы получаете ответ из сети, вы должны возвращать курсы, а не только данные напрямую. Вот как ваш шаблон vue настроен для чтения данных.

Это this.courses = res.data; становится this.courses = res.data.Courses;

Кроме того, попробуйте присвоить свойствам курса все слова нижнего регистра, так как это то, что ищет шаблон.

Вот пример vue проекта песочницы, который решает ваши проблемы (найдите файл HelloWorld.vue, соответствующий вашему Courses.vue файлу)

https://codesandbox.io/s/inspiring-swirles-lq6s4?fontsize=14&hidenavigation=1&theme=dark

1 голос
/ 11 января 2020

Возможно, он молча не может отрендерить, потому что вы пытаетесь получить доступ к несуществующим свойствам.

Убедитесь, что course.name и course.language на самом деле не должны быть прописными (course.Name и course.Language) 

<td>{{course.Name}}</td>
<td>{{course.Language}}</td>
...