Vuetify table not showing data

user_17475489 0
Viewed 149

I am new to the vuetify and having a headache with displaying table. I searched others and tried them on mine but its not showing...

shows data on dev tool

I can see my data with dev tool but it wont show on the table ;~;

Here are my codes

Vuetify Table Code

BoardList.vue 

<template>
  <v-container>
    <v-data-table
      :headers="headers"
      :items="boards"
      class="elevation-1"
      :search="search"
    >
      <template v-slot:item="props">
        <td class="text-xs-right">{{ props.item.articleno }}</td>
        <td class="text-xs-right">{{ props.item.data.articleno }}</td>
      </template>
    </v-data-table>
    <v-col><v-col md="8" /></v-col>
    <v-container>
      <v-row>
        <v-col md="6" />
        <v-btn @click="goodbye"> 게시글 삭제</v-btn>
      </v-row>
    </v-container>
  </v-container>
</template>

script part

<script>
import { listArticle } from "@/api/board";
export default {
  name: "MemberList",
  methods: {
    goodbye() {
      alert("remove?");
    },
  },
  data() {
    return {
      search: "",
      headers: [
        {
          text: "article number",
          align: "start",
          sortable: true,
          value: "articleno",
        },
        { text: "Subject", value: "subject" },
      ],
      boards: [],
    };
  },
  created() {
    listArticle(
      (response) => {
        this.boards = response.data;
      },
      (error) => {
        console.log(error);
      }
    );
  },
};
</script>

api/board.js

function listArticle(param, success, fail) {
  api.get(`/board`, { params: param }).then(success).catch(fail);
}

I tried props.item.articleno, props.item.data.articleno, item.articleno , item.data.articleno and none of them are working... and my vue version is 2.6.11 What am I doing wrong

vuetify.js vue.js json javascript
1 Answers

I may be wrong but it looks like you are only passing two items when calling listArticle method.

How it's defined: listArticle(param, success, fail)

How it's called: listArticle((response) => {}, (error) => {});

How it should be called: listArticle(param, (response) => {}, (error) => {});

Does the items in the response.data have a data prop as used in props.item.data.articleno? I'm guessing data does not exist so key articleno can't be found and there is a browser error accessing nested values causing the slots to not be displayed.

Other suggestions (may not fix):

  • Wrap the two <td>s inside <tr> (unless it's already part of item slot template, check in DOM if you get any rows to show up)
  • Deconstruct v-slot props so you don't have to reference it as props.item
<template v-slot:item="{ item }">
  <tr>
    <td class="text-xs-right">{{ item.articleno }}</td> // this should work
    <td class="text-xs-right">{{ item.data.articleno }}</td> // i don't think this will
  </tr>
</template>
user_67623100
Related