使用 laravel 转换 vue js 中的日期格式答案

【问题标题】：Convert date format in vue js with laravel使用 laravel 转换 vue js 中的日期格式
【发布时间】：2019-07-26 17:09:51
【问题描述】：

我正在使用 verta 库将公历日期转换为 laravel 中的回历日期 https://github.com/hekmatinasser/verta

在简单模式下（.blade.php 文件）我使用这样的代码：

{{ Verta($category->created_at)->format('%d %B %Y') }}
for converting {{created_at}}

但在 Vue js 中，我无法访问我拥有的这种格式

{{category.created_at}}

如何用这种方法转换 vue js 日期？

【问题讨论】：

如果你想重用你在 laravel 中所做的事情，你需要先解析日期，然后再将它们返回到前端。您可以在读取数据库条目时使用突变（laravel.com/docs/5.8/eloquent-mutators）自动执行此操作
stackoverflow.com/questions/46708110/…

标签： laravel date laravel-5 vue.js vuejs2

【解决方案1】：

您可以在模型上使用 mutator 在返回日期之前对其进行解析。

public function getCreatedAtAttribute($value)
{
    return Verta($value)->format('%d %B %Y');
}

这应该在您的类别模型中定义

{{category.created_at}}

然后将包含已解析的日期

【讨论】：

是的，最好的方法是创建一个属性。不要忘记将它添加到附加数组中
as created_at 是一个实际的数据库字段，您不需要附加它（在这种特定情况下/问题中）

【解决方案2】：

很简单，你可以通过moment.js按照三个步骤完成。

第 1 步：

npm install moment --save

第 2 步：

import moment from "moment";

第 3 步：

export default {
    data() {
        return {
            moment: moment
        }
    } }

完成。

现在在下面做

 {{ moment(category.created_at).format("DD-MM-YYYY") }}

【讨论】：

【解决方案3】：

您可以使用vue-moment。

npm install vue-moment

...并且需要这样的插件：

Vue.use(require('vue-moment'));

然后，在您的应用程序中，您可以执行以下操作：

{{ someDate | moment("dddd, MMMM Do YYYY") }}

【讨论】：

【解决方案4】：

在 Laravel 端

1)
public function getCreatedAtAttribute($value)
{
    return $value->format('d-m-Y');
}

2)protected $casts = [
    'birthday'  => 'date:Y-m-d'
];

在 Vue .js 端制作过滤器

npm install moment

In  resources/js/app.js

import moment from 'moment';

Vue.filter('formatDate', function(value) {
    if (value) {
        return moment(String(value)).format('MM/DD/YYYY')
    }
});

在 Vue 组件方面

{{ category.created_at | formatDate }}

【讨论】：