v-data-table-server 未更新表模板中的组件

Question

我有一个 Vuetify

v-data-table-server

(docs)，它通过从 API 获取数据来更新自身。

<template>
  <v-data-table-server
    v-if="events.length > 0"
    v-model:items-per-page="events_limit"
    :headers="headers"
    :items-length="events_total"
    :items="events"
    :loading="loading"
    item-key="e_id"
    @update:options="loadItems">

      <template #item.e_created_at="{ item }">
        <event-date :initialDate="item.raw.e_created_at" />
        {{ item.raw.e_created_at }}
      </template>
      
      <template #item.e_status="{ item }">
        {{ item.raw.e_status }}
      </template>
  </v-data-table-server>
</template>

<script>
import userService from "user.service";
import EventDate from "EventDate.vue";

export default {
  name: "Events",
  props: ["page"],
  computed: {},
  components: {
    EventDate,
  },
  data: () => ({
    isLoading: false,
    isSuccess: false,
    events: [],
    events_offset: 0,
    events_limit: 10,
    loading: true,
    headers: [
      {
        title: "Date",
        align: "start",
        sortable: true,
        key: "e_created_at",
      },
      {
        title: "Result",
        align: "start",
        sortable: true,
        key: "e_status",
      },
    ],
  }),
  mounted() {
    this.loadItems({ page: 1, itemsPerPage: 10 });
  },
  methods: {
    loadItems({ page, itemsPerPage, sortBy }) {
      this.loading = true;
      userService
        .get_events({
          limit: itemsPerPage,
          offset: (page - 1) * itemsPerPage,
          sort_by: sortBy,
        })
        .then(
          (response) => {
            this.events_total = response.events_total;
            this.events = response.events;
            this.loading = false;
          },
          (error) => {
            console.log(error);
          }
        )
    },
  },
};
</script>

我还有一个

EventDate

组件，它只是格式化日期：

<template>
  <div>
    <span>{{ formattedDate }}</span>
  </div>
</template>

<script>
export default {
  name: "EventDate",
  props: {
    initialDate: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      date: "",
    };
  },
  computed: {
    formattedDate() {
      const dt = new Date(this.date);
      const day = dt.getDate().toString().padStart(2, "0");
      const month = (dt.getMonth() + 1).toString().padStart(2, "0");
      const year = dt.getFullYear();
      const hours = dt.getHours().toString().padStart(2, "0");
      const minutes = dt.getMinutes().toString().padStart(2, "0");
      const seconds = dt.getSeconds().toString().padStart(2, "0");

      return `${day}.${month}.${year} ${hours}:${minutes}:${seconds}`;
    },
  },
  created() {
    this.date = this.initialDate; // Set the initial date when component is created
  },
};
</script>

获取第一页时，一切看起来都很正常：组件显示格式化数据。

但是当我跳转到另一个页面时，虽然我从 API 获得了正确的值，甚至在表格中看到了它们，但

EventDate

组件实例没有更新：

我错过了什么？

Answer 1

这是因为您每次都使用相同的页码-

mounted() {
  this.loadItems({ page: 1, itemsPerPage: 10 });
},

正如我所见，您将页码作为道具，因此请使用道具数据-

mounted() {
  this.loadItems({ page: this.page, itemsPerPage: 10 });
},

让我知道这是否有效。