在vuejs中正确显示"created_at"字段

Question

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

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

这是我想要显示的： 时间：2018 年 2 月 22 日14:14:30

我的laravel后端代码：

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

如有任何帮助，我们将不胜感激。

Answer 1

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

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

但是如果 return 和以前一样但显示类似的东西（并且不使用我的 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" -->

Answer 2

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

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

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

请务必在 class 之前在顶部添加 use Carbon\Carbon;。

现在当你return你的约会对象...

    $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 仅 return 没有 created_at 键的日期，请将 Laravel 中的查询更改为以下内容。

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

Displaying the "created_at" field correctly in vuejs