Есть ли способ использовать атрибут contenteditable в элементе <td>в компоненте vuetify Datatable

Question

Я хочу использовать параметр редактирования строки в компоненте Vuetify Datatable вместо открытия диалогового окна для редактирования. Есть ли способ использовать атрибут contenteditable в элементе в компоненте vuetify Datatable.

Answer 1

Vuetify имеет встроенный режим редактирования содержимого.

DOCS

Идея состоит в том, что в каждый слот добавляется v-edit-dialog и v-text-field, а затем синхронизировать c данные, используя v-model and return-value.sync

Answer 2

Вместо использования атрибута contenteditable, я использовал следующий код и работал отлично (редактируется без открытия диалогового окна и сохранения в переменной связывания)

<template v-slot:item.name="props">
<v-text-field v-model="props.item.name"> </v-text-field>    
</template>

Answer 3

Согласно MDN https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/contentEditable вы можете применить атрибут contenteditable к любому элементу HTMLE.

Попробуйте добавить атрибут к элементу, который хотите редактировать.

например

<div contenteditable="true"></div>