在 vuejs 中正确显示“created_at”字段答案

【问题标题】：Displaying the "created_at" field correctly in vuejs在 vuejs 中正确显示“created_at”字段
【发布时间】：2018-08-02 10:21:16
【问题描述】：

我正在尝试使用 laravel 作为我的后端应用程序和 vuejs 作为我的前端应用程序从我的数据库中显示“created_at”字段。

这是当前显示的内容： 时间： { "created_at": "2018-02-22 14:14:30" }

这就是我想要显示的内容： 时间： 22-Feb-2018 14:14:30

我的 laravel 后端代码：

$date = loan_request::all('created_at')->toArray();
    return([$date]);

任何帮助将不胜感激..

【问题讨论】：

“正确显示”是什么意思？
你能给我们看看 html / vue.js 模板，看看你到底想要什么吗？
@ascheron 我基本上是在我的 vue.js 模板中调用 laravel API 并回显结果。这里的问题是我需要我的 laravel 应用程序发送“created_at”字段，例如“22-Feb-2018 14:14:30”而不是“{“created_at”：“2018-02-22 14:14:30”} "
@RuChernChong 我在上面的评论中已经解释过了..

【解决方案1】：

我将如何进行日期格式化是使用 Eloquent 访问器。

为此，请转到您的 loan_request 模型，然后简单地添加以下函数。

public function getCreatedAtAttribute($date)
{
    return Carbon::parse($date)->format('d-M-Y H:i:s');
}

请务必在上课前在顶部添加use Carbon\Carbon;。

现在当你返回你的约会时......

    $date = loan_request::all('created_at')->toArray();
    return([$date]);

您在 json 数组中的日期将始终采用 22-Feb-2018 14:14:30 格式

您可以在 Laravel 文档here中阅读更多关于访问器和修改器的信息

编辑

我第一次阅读时错过了要删除created_at 键。正如其他人指出的那样，您可以通过执行以下操作之一在您的 vue 代码中做到这一点。

<div v-text="date.created_at"></div>
or..
<div>{{data.created_at}}</div>

如果你仍然真的希望 laravel 只返回没有 created_at 键的日期，那么将你在 Laravel 中的查询更改为以下内容。

$date = Location::all('created_at')->pluck('created_at');
return ([$date]);

【讨论】：

【解决方案2】：

回答您的问题（使用您现有的 HTML）：

$date = loan_request::all('created_at')->pluck('created_at')->toArray();
    return $date; // will return an array of dates

但是如果返回与以前相同的内容但显示类似的内容（而不是使用我的 laravel 更改），您可以做什么：

date = { "created_at": "2018-02-22 14:14:30" }

在你的 html/vue.js 文件中

<span>{{ date.created_at }}</span> <!-- "2018-02-22 14:14:30" -->

因为现在您似乎显示如下内容：

<span>{{ date }}</span> <!-- { "created_at": "2018-02-22 14:14:30" } -->

如果你想格式化日期，你只能在前端使用 vue.js 中的过滤器来实现！（您可以自己编码或使用https://github.com/brockpetrie/vue-moment）

<span>{{ date.created_at | moment("dddd, MMMM Do YYYY, h:mm:ss a") }}</span>
<!-- e.g. "Sunday, February 14th 2010, 3:25:50 pm" -->

【讨论】：