Computed properties in Vuetify Datatable rows

Question

I am using Vuetify and Vuetify/Datatables for a website. Now I want some computed properties on every row of the table.

To do that I would probably need to make a component of the <template> element and add computed properties to that component. I tried <template is="myComponent" :m="props.item"> but this did not work.

<v-data-table
  :headers="headers"
  :items="items"
  hide-actions
  class="elevation-1"
>
  <template slot="items" slot-scope="props">
    <td>{{ THIS_VALUE_COMPUTED }}</td>
    <td class="text-xs-right">{{ props.item.calories }}</td>
    <td class="text-xs-right">{{ props.item.fat }}</td>
    <td class="text-xs-right">{{ props.item.carbs }}</td>
    <td class="text-xs-right">{{ props.item.protein }}</td>
    <td class="text-xs-right">{{ props.item.iron }}</td>
  </template>
</v-data-table>

Answer 1

it's a bit aged question but this might work, it is from the vuetify 2.0.19 documentation. Here you can do a computed value on one of the single properties of your table.

<v-data-table
  :headers="headers"
  :items="items"
  hide-actions
  class="elevation-1"
>
   <template
            v-slot:item.calories="{ item }" >
    {{ THIS_VALUE_COMPUTED }}
  </template>
</v-data-table>