[Vuejs]-Axios data not displayed in Vuetify table

by

1👍

✅

Can you try this:

<template>
  <v-data-table
    :headers="headers"
    :items="info"
    class="elevation-1"
  >
  <template v-slot:items="props">
      <td>{{ props.item.BUGNUM }}</td>
       <td>{{ props.item.DEV }}</td>
       <td>{{ props.item.SEV }}</td>
      <td>{{ props.item.STATUS }}</td>
       <td>{{ props.item.SUB }}</td>
     </template>
  </v-data-table>
</template>

<script>
import axios from 'axios'
export default {
  name: 'App',
  data () {
    return {
      headers: [
      {text: 'BUG NUMBER', value: 'BUGNUM'},
      {text: 'DEVELOPER', value: 'DEV'},
      {text: 'SEVERITY', value: 'SEV'},
      {text: 'STATUS', value: 'STATUS'},
      {text: 'SUBJECT', value: 'SUB'},
      ],
      info: []
    }
  },
  mounted () {
    axios
      .get('http://localhost:3000/merged/')
      .then(response => {
        this.info = response.data
      })
  }
};
</script>

As i think your response have Uppercase keys. May be it work.

👤Nipun Jain

Leave a comment