v-data-table-server表格内EventDate组件翻页后不更新问题

你这个问题出在EventDate组件的逻辑上：组件只在created钩子中把传入的initialDate赋值给了data里的date变量，但切换分页时，Vuetify的表格会复用行组件，不会重新创建EventDate实例，所以created钩子不会再次执行，date变量也就不会跟着新的initialDate更新，导致格式化后的日期还是旧数据。

有两种简单的修复方式，选一种就行：

方式一：直接基于props计算（更简洁） #

删掉data里的date变量，让formattedDate直接使用props的initialDate，这样props变化时计算属性会自动响应：

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

<script>
export default {
  name: "EventDate",
  props: {
    initialDate: {
      type: String,
      required: true,
    },
  },
  computed: {
    formattedDate() {
      const dt = new Date(this.initialDate);
      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}`;
    },
  },
};
</script>

方式二：监听props变化更新date #

如果一定要保留data里的date，可以添加一个监听器，当initialDate变化时同步更新date：

<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;
  },
  watch: {
    initialDate(newVal) {
      this.date = newVal;
    }
  }
};
</script>

推荐用第一种方式，更符合Vue的响应式设计，代码也更简洁。

内容的提问来源于stack exchange，提问作者praegustator