Vuetify 表不显示数据答案

【问题标题】：Vuetify table not showing dataVuetify 表不显示数据
【发布时间】：2021-12-31 18:01:48
【问题描述】：

我是 vuetify 的新手，对显示表格感到头疼。我搜索了其他人并在我的身上尝试过，但它没有显示......

我可以使用开发工具查看我的数据，但它不会显示在表格上;~;

这是我的代码

Vuetify 表格代码

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>
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);
}

我尝试了 props.item.articleno、props.item.data.articleno、item.articleno、item.data.articleno 并且它们都没有工作......我的 vue 版本是 2.6.11 我做错了什么？？？？？？？？？？？？？？？

【问题讨论】：

尝试在 v-data-table 元素上使用 "v-if="boards.length"

标签： javascript json vue.js vuetify.js

【解决方案1】：

我可能错了，但看起来您在调用 listArticle 方法时只传递了两个项目。

如何定义：listArticle(param, success, fail)

如何称呼：listArticle((response) => {}, (error) => {});

应该如何称呼：listArticle(param, (response) => {}, (error) => {});

response.data 中的项目是否具有 props.item.data.articleno 中使用的 data 属性？我猜data 不存在，因此无法找到键articleno，并且访问嵌套值时出现浏览器错误，导致插槽无法显示。

其他建议（可能无法解决）：

将两个<td>s 包裹在<tr> 中（除非它已经是项目槽模板的一部分，如果有任何行要显示，请检查DOM）
解构 v-slot 道具，因此您不必将其引用为 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>

【讨论】：