Displaying the "created_at" field correctly in vuejs - arrays

Question

I am trying to display the "created_at" field from my database using laravel as my backend app and vuejs as my frontend app.
This is what is presently being displayed:
Time: { "created_at": "2018-02-22 14:14:30" }
This is what I want to be displayed:
Time: 22-Feb-2018 14:14:30
My laravel backend code:
$date = loan_request::all('created_at')->toArray();
return([$date]);
Any help rendered would be appreciated..

Answer 1

How I would do the date formating is to use an Eloquent Accessor.
To do this, go to your loan_request model, and simply add the following function.
public function getCreatedAtAttribute($date)
{
return Carbon::parse($date)->format('d-M-Y H:i:s');
}
Be sure to add use Carbon\Carbon; at the top before your class.
Now when you return your date with...
$date = loan_request::all('created_at')->toArray();
return([$date]);
Your dates in the json array will always be in the format 22-Feb-2018 14:14:30
You can read more about Accessors and Mutators in the Laravel Docs here
Edit
I missed when reading the first time you want to remove the created_at key. As others have pointed out you could do that in your vue code by doing one of the following.
<div v-text="date.created_at"></div>
or..
<div>{{data.created_at}}</div>
If you still really want laravel to only return the date without the created_at key then change your query in Laravel to the following.
$date = Location::all('created_at')->pluck('created_at');
return ([$date]);

Answer 2

To answer your question (with your existing HTML):
$date = loan_request::all('created_at')->pluck('created_at')->toArray();
return $date; // will return an array of dates
But what you can do if return the same thing as before but display something like that (and not using my laravel change):
date = { "created_at": "2018-02-22 14:14:30" }
in your html / vue.js file
<span>{{ date.created_at }}</span> <!-- "2018-02-22 14:14:30" -->
Because for now you seem to display something like this:
<span>{{ date }}</span> <!-- { "created_at": "2018-02-22 14:14:30" } -->
And if you want to format the date, you can only do that in the frontend by using filters in vue.js! (You can code your own or use 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" -->