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>