How to alter a value in a v-data-table

Question

I am new to vuetify and I'm trying to take the value in a column of a v-data-table and convert it to it's text equivalent, but can't find out how to do it.

headers: [
    { text: 'Name', value: 'name' },
    { text: 'Type', value: 'typeName(type)' },
  ]

I have tried typeName as a computed value and as a method:

typeName(typId) {
  return ...
},

How do I get this to work?

Do you want a dynamic headers or dynamic column value of type? — chans, Oct 18 '19 at 14:15
I want to change the value. If I just do `type` instead of `typeName(type)`, I get the number. I want to change it to its matching text value. — Graham, Oct 18 '19 at 14:54
Colume name is type, but the value you wanted to be a formatted value of type, Am I right here? — chans, Oct 18 '19 at 14:56
Yes, you could say it that way. The actual value comes from a database endpoint, so I can't change it at source. — Graham, Oct 18 '19 at 14:58

score 1 · Accepted Answer · answered Oct 18 '19 at 15:25

Yes, you can format the column value by adding a explict function

Here is the working codepen which reverse the value of first column: https://codepen.io/chansv/pen/GRRjaqj?editors=1010

If you have headers type, no need to call the function from here, instead we need to call from column by adding a template

headers: [
    { text: 'Name', value: 'name' },
    { text: 'Type', value: 'type' },
  ]

In the HTML , add a template with slot points to body

<v-data-table
      :headers="headers"
      :items="items"   >
<template v-slot:body="{items}">
      <tbody>
        <tr v-for="item in items" :key="item.name">
        <td>{{item.name}}</td>
        <td>{{typeName(item.type)}}</td>
        </tr>
        </tbody>
    </template>
</v-data-table>

Inside data property add a property typeName

data() {
  return {
    typeName: (type) => type.substring(2),
  }
}

How to alter a value in a v-data-table

1 Answers1