Laravel/Vue项目如何获取tasks表created_at字段并格式化展示日期

第一步：修复Laravel端created_at字段返回问题 #

你无法获取字段返回值的核心原因是Laravel序列化模型时没有把created_at加入输出列表，按以下步骤处理：

• 打开app/Models/Task.php文件，检查模型配置：
  1. 确认$hidden数组中没有created_at字段，如果有直接删除
  2. 如果配置了$visible白名单数组，需要把created_at加入数组中

  // 示例Task模型基础配置
  protected $fillable = ['content', 'due_date', 'created_at', 'priority', 'description'];
  protected $visible = ['id', 'uuid', 'content', 'created_at', 'due_date', 'priority', 'description']; // 确保包含created_at
  

• 如果想要后端直接返回格式化好的日期，直接在Task模型中添加访问器即可，无需前端处理：

  // 追加到序列化输出的字段
  protected $appends = ['formatted_created_at'];
  
  // 日期格式化访问器
  public function getFormattedCreatedAtAttribute()
  {
      // 空值兼容
      if (!$this->created_at) return null;
      // 格式为 日 月份缩写 年，即你需要的11 Nov 2021样式
      return $this->created_at->format('d M Y');
  }
  

  配置完成后后端返回的任务数据中会自动携带formatted_created_at字段，直接传给前端使用即可。

第二步：修复Vue端数据接收与格式化 #

先修复现有代码的错误 #

你当前的Vue代码存在两个问题会导致数据为空：

1. props中没有定义description，但data中引用了this.description，需要补充props定义
2. data中初始化Form的uuid字段取了不存在的this.uuid，应该用props里的this.taskUuid

// 补充description的props定义
props: {
    // 其他现有props不变
    createdAt: {
        type: String,
        default: null
    },
    description: {
        type: String,
        default: null
    }
},
data() {
    return {
        task: new Form({
            uuid: this.taskUuid, // 修复uuid取值错误
            content: this.content,
            is_completed: this.isCompleted,
            user_uuid: this.userUuid,
            due_date: this.dueDate,
            priority: this.priority,
            created_at: this.createdAt,
            description: this.description
        })
    }
}

父组件传值要求 #

调用modal-task组件时必须传入created-at属性，示例：

<modal-task
  :content="task.content"
  :task-uuid="task.uuid"
  :created-at="task.created_at"
  <!-- 其他属性按需传 -->
/>

前端格式化日期方案 #

如果选择前端处理格式化，推荐用轻量日期库dayjs实现：

1. 安装依赖：npm install dayjs
2. 组件中添加计算属性格式化日期：

import dayjs from 'dayjs'
// 其他代码不变
computed: {
  formattedCreatedAt() {
    if (!this.task.created_at) return ''
    return dayjs(this.task.created_at).format('DD MMM YYYY')
  }
}

3. 模板中替换渲染内容：

<div class="inline-block">{{ formattedCreatedAt }}</div>

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