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 · Accepted Answer · 2022-08-25 20:43:17Z

3

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">
   {{ ingredient.ingName }}
  </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).

edited Aug 25, 2022 at 20:43

answered Dec 31, 2019 at 14:16

jrend

1,1223 gold badges15 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vuetify: Objects in Datatables

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related