Urgent Help needed. V-data-table, vue

#vuetify #javascript #vue #help

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.

Top comments (1)

Matija Novosel • Sep 27 '22

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!

DEV Community

Urgent Help needed. V-data-table, vue

Top comments (1)

Read next

Using BroadcastChannel API with Vue to sync a ref across multiple tabs

🚀 Fetching and Displaying Data in Nuxt 3 with useAsyncData

I just cloned Threads!

What's new in Next.js 15