CODEWITHSUNDEEP
javascripthtmlvue.jsvuejs2vue-component
Onur
Onur

Reputation: 451

VueJS does not render table data

I want to render data from the API I created previously by using VueJS 2. My VueJS code block does not render the data I sent via backend services. Debug console returns no errors. Vue Debug extension for Firefox returns the table data succesfully. But I can not display the data in HTML table. Here comes the code block:

Courses.vue file:

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

App.vue file:

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

My API result:

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

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

Upvotes: 0

Views: 562

Answers (2)

grane2212
grane2212

Reputation: 774

The API result doesn't seem to be in the correct format. You are missing a ] bracket around the courses data.

I think it should look something like this

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

Also note that when you get the response back from the network you should return the courses instead of just the data directly. That is how your vue template is configured to read the data.

This this.courses = res.data; becomes this.courses = res.data.Courses;

Also, try naming the course properties all lower case words since that is what the template is looking for.

Here is the sample vue sandbox project that addresses your issues (Look for the HelloWorld.vue file that corresponds to your Courses.vue file)

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

Upvotes: 1

AlekseyHoffman
AlekseyHoffman

Reputation: 2694

It maybe silently fails to render because you're trying to access properties that don't exist.

Make sure course.name and course.language are not actually supposed to be uppercase (course.Name and course.Language)

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

Upvotes: 1

Related Questions