Urgent Help needed. V-data-table, vue

I am able to create v-data-table but i have to achieve cell level edit option. i.e on double click a person may able to edit data of that cell of v-data-table.

Comments

[Matija Novosel]

You can override the cells individually by using the item slots described here. Define a @dblclick event on the contents of the slot, handle the changes in a way you see fit and that's about it.

e.g. working off the example above

<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    class="elevation-1"
  >
    <template #item.calories="{ item }">
      <v-text-field v-if="item.editing" v-model="item.calories">
        <template #append>
          <v-btn @click="item.editing = !item.editing"> Finish </v-btn>
         </template>
      </v-text-field>
      <v-chip
        v-else
        :color="getColor(item.calories)"
        dark
        @dblclick="item.editing = !item.editing"
      >
         {{ item.calories }}
       </v-chip>
    </template>
  </v-data-table>
</template>

Good luck!