edit certain field in simple table vuetify code example

Example 1: vuetify table make all columns editable

<template v-slot:body="{ items, headers }">
                <tbody>
                    <tr v-for="(item,idx,k) in items" :key="idx">
                        <td v-for="(header,key) in headers" :key="key">
                            <v-edit-dialog
                              :return-value.sync="item[header.value]"
                              @save="save"
                              @cancel="cancel"
                              @open="open"
                              @close="close"
                            > {{item[header.value]}}
                              <template v-slot:input>
                                <v-text-field
                                  v-model="item[header.value]"
                                  label="Edit"
                                  single-line
                                ></v-text-field>
                              </template>
                            </v-edit-dialog>
                        </td>
                    </tr>
                </tbody>
            </template>

Example 2: add custom attribute to table row in vuetify

<template v-slot:item="{ item }">
  <tr :class="{active: group && item.id == group.id}">
    <td>{{ item.name }}</td>
    <td>{{ item.grade }}</td>
  </tr>
</template>

Tags:

Misc Example