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...
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
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):
<td>
s inside <tr>
(unless it's already part of item slot template, check in DOM if you get any rows to show up)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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.