Vue 3 - Vuetify 3 标题未出现

Question

我尝试了所有我能想到的不同方法来显示此数据表中的标题。 其他一切都有效，只是没有标题......任何想法都非常感谢

感觉这应该是一件非常简单的事情。

将鼠标悬停在标题区域时会出现排序箭头。 我已经尝试了标题数据数组中的标题和文本。 我也尝试过将它们硬编码到模板中......没有喜悦

<template>
<v-container>
<v-row>
  <v-col>
    <v-btn color="primary" @click="fetchReports" class="mb-4">Refresh</v-btn>

    <!-- Data Table -->
    <v-data-table
      :headers="headers"
      :items="reports"
      class="elevation-3 observation-table"
      dense
      outlined
      rounded
    >
      <!-- Explicit header slots -->
      <template #column.id>
        <strong>ID</strong>
      </template>
      <template #column.user>
        <strong>User</strong>
      </template>
      <template #column.report_date>
        <strong>Report Date</strong>
      </template>
      <template #column.location>
        <strong>Location</strong>
      </template>

      <!-- Body Rows -->
      <template #body="{ items }">
        <tr
          v-for="item in items"
          :key="item.id"
          @click="viewReport(item)"
          class="clickable-row"
        >
          <td>{{ item.id }}</td>
          <td>{{ item.user }}</td>
          <td>{{ formatDate(item.report_date) }}</td>
          <td>{{ item.location }}</td>
        </tr>
      </template>
    </v-data-table>


    <!-- Button to Navigate to Form -->
    <v-btn color="primary" class="mt-4" @click="navigateToForm">
      Create Observation Report
      </v-btn>
     </v-col>
   </v-row>
  </v-container>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      reports: [],
      headers: [
        { text: "ID", value: "id" },
        { text: "User", value: "user" },
        { text: "Report Date", value: "report_date" },
        { text: "Location", value: "location" },
      ],
      search: "",
    };
  },
  methods: {
    async fetchReports() {
      try {
        const token = localStorage.getItem("accessToken");
        if (!token) throw new Error("Token is missing. Please log in.");
        const response = await axios.get(`/api/observationreports`, {
          headers: { Authorization: `Bearer ${token}` },
        });
        this.reports = response.data.map((report) => ({
          id: report.id,
          user: `${report.first_name} ${report.last_name}`,
          report_date: report.report_date,
          location: report.location,
        }));
        console.log("Headers:", this.headers);
      } catch (error) {
        console.error("Error fetching observation reports:", error.message);
      }
    },
    mounted() {
    console.log("Headers array:", this.headers); // Debugging headers array
    this.fetchReports();
  },
};
</script>

它希望我添加更多细节，所以我不确定还要添加什么。 很清楚我遇到了什么麻烦......:(

原创 - 抱歉代码墙：

<template>
  <v-container>
    <v-row>
      <v-col>
        <v-btn color="primary" @click="fetchReports" class="mb-4">Refresh</v-btn>

        <!-- Data Table -->
        <v-data-table
          :headers="headers"
          :items="reports"
          class="elevation-3 observation-table"
          dense
          outlined
          rounded
        >
          <!-- Toolbar for title and search -->
          <template v-slot:top>
            <v-toolbar flat>
              <v-toolbar-title>Observation Reports</v-toolbar-title>
              <v-spacer></v-spacer>
              <v-text-field
                v-model="search"
                label="Search"
                single-line
                hide-details
                outlined
                dense
                style="max-width: 300px;"
              ></v-text-field>
            </v-toolbar>
          </template>

          <!-- Custom body for clickable rows -->
          <template #body="{ items }">
            <tbody>
              <tr
                v-for="item in items"
                :key="item.id"
                @click="viewReport(item)"
                class="clickable-row"
              >
                <td>{{ item.id }}</td>
                <td>{{ item.user }}</td>
                <td>{{ formatDate(item.report_date) }}</td>
                <td>{{ item.location }}</td>
              </tr>
            </tbody>
          </template>
        </v-data-table>

        <!-- Button to Navigate to Form -->
        <v-btn color="primary" class="mt-4" @click="navigateToForm">
          Create Observation Report
        </v-btn>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      reports: [],
      headers: [
        { text: "ID", value: "id" },
        { text: "User", value: "user" },
        { text: "Report Date", value: "report_date" },
        { text: "Location", value: "location" },
      ],
      search: "",
    };
  },
  methods: {
    async fetchReports() {
      try {
        const token = localStorage.getItem("accessToken");
        if (!token) throw new Error("Token is missing. Please log in.");
        const response = await axios.get(`/api/observationreports`, {
          headers: { Authorization: `Bearer ${token}` },
        });
        this.reports = response.data.map((report) => ({
          id: report.id,
          user: `${report.first_name} ${report.last_name}`,
          report_date: report.report_date,
          location: report.location,
        }));
      } catch (error) {
        console.error("Error fetching observation reports:", error.message);
      }
    },
    navigateToForm() {
      this.$router.push({ name: "ObservationReportForm" });
    },
    viewReport(report) {
      this.$router.push({ name: "CompletedObservationReport", params: { id: report.id } });
    },
    formatDate(dateString) {
      if (!dateString) return "N/A";
      const options = { year: "numeric", month: "short", day: "numeric" };
      return new Date(dateString).toLocaleDateString(undefined, options);
    },
  },
  mounted() {
    console.log("Headers array:", this.headers); // Debugging headers array
    this.fetchReports();
  },
};
</script>

<style scoped>
.observation-table {
  width: 100%;
}
</style>

Answer 1

在 Vuetify 3 中，标头槽被命名为

header.${string}

（参见 docs），而不是

column.${string}

（我认为那是 Vuetify 2？）。

只需更改为

<template #header.id>
  <strong>ID</strong>
</template>
<template #header.user>
  <strong>User</strong>
</template>
...

游乐场