Vuetify: Objects in Datatables

Question

I have a conceptual question about data tables and objects passed into it.

Let's assume I have the normal data tables CRUD example from vuetify: https://codepen.io/rasenkantenstein/pen/MWYEvzK

ingredients:
        [
          {
            ingName: 'Yogurt',
            amount: 100,
            measure: 'gramm'
          },
          {
            ingName: 'Ice',
            amount: 50,
            measure: 'ml'
          }
        ]

At line 65 (JS) I have created a new Object-Array with ingredients, so one dessert has at least one ingredient (or more).

I am struggling to implement this into the edit table. Also, I would like to output the ingredients (e.g. comma separated) inside the table (and somehow load them in the form).

Are objects like this at all editable with Vuetify datatables? Would it be a good approach to loop through the ingredients array for the pop up?

jrend jrend · Accepted Answer · 2019-12-31T14:16:26

You can use the v-slot prop exactly like how your using it for your Edit/Delete actions.

<template v-slot:item.ingredients="{ item }">
  <span v-for="ingredient in item.ingredients">
    <span>{{ ingredient.ingName }}</span>
  </span>
</template>

Using the v-slot property essentially overwrites the header value that you've specified. Since there is a header named ingredients, you need to overwrite it using v-slot:item.ingredients. You can use this as well to alter/format values before they're displayed in the table (i.e adding commas to large numbers, formatting money values, creating lists, etc).

Vuetify: Objects in Datatables

1 Answers