mstdmstd's avatar

Make computed fields data-tables in vuejs/vuetify librray

Hello, In my Laravel 5.5/vue.js2.5 spplication I use data-tables from vuetify,1.0.8 and reviwing docs I did not find if there are ways :

  1. to show some fields as computed fields, say having datetime field in raw db format as “2015-03-11 05:26:54” I would like to show it in “20 January, 2018 1:55 PM” format. I dislike way of convirting this field on server side, as I need to sort them on client I would get wrong results. Similar way with enum fields, as I want to show label, but have possibility to sort them by raw db fields.

  2. How to make view link to other page(row editor in my case) in data-tables?

  3. By link above I need to edit row. Are there some vuetify component/tools for this purpose(At least with material design)? Could you advice some ?

Thanks!

0 likes
4 replies
mstdmstd's avatar

Thanks, I know this library, but what I really asked was how format fields in data-tables from vuetify, some kind of computed fields for rows in data-tables ?

Corban's avatar

First one, you could use a mutator and return the formated date (this goes in your model):

public function getformatedDateAttribute(){
return $this->date->format('%d/%B/%Y');
}

Then in your view just call it instead of the colunm name:

@{{ data.formated_date }}

Second one I'm not sure, but what about using a v-btn with an icon?

Last one I don't understand what you actually want, sorry.

Hope it helps.

mstdmstd's avatar

Thanks for your response!

  1. I know how to work with eloquent-mutators, but as I wrote above I dislike way of convirting this field on server side, as I need to sort them on client I would get wrong results. Setting my v-data-table I want to have functionality ut has, like sorting In API I found Scoped Slots, labeled as
items { item: object; index: number; selected: boolean; expanded: boolean; }
Slot to specify how items are rendered

but I do not see example of that functionality and is not sure which is correct syntax for it.

  1. I found
CRUD Actions
data-table with CRUD actions usin...

that looks what I need...

  1. Actually that iis https://vuetifyjs.com/ru/components/forms.

So only for 1) I still search for decision...

Please or to participate in this conversation.