Sure, here’s the translation:

Hello, I have a question. I want to build a simple editor similar to Excel, which should function like Excel. Data should be automatically saved in the database whenever a cell value changes. Currently, I have it set up so that when I edit a cell, I have to click the save button for the value to be updated in the database. Im new here. I hope you can help me and thank you 🙏 Here is the code its not the complete code but i hope it helps:

           <template v-slot:activator="{ on, attrs }">
                        <v-btn
                            color="orange"
                            dark
                            depressed
                            :loading="exportCSVLoader"
                            class="mb-2 mx-2"
                            @click="exportCSV"
                        >
                            Expotieren
                        </v-btn>
                        <ImportCSV
                            @csvData="getImportFileData"
                            :importCSVLoader="importCSVLoader"
                        />

                        <v-btn
                            color="primary"
                            dark
                            depressed
                            class="mb-2"
                            v-bind="attrs"
                            v-on="on"
                        >
                            Neues hinzufügen
                        </v-btn>
                        <v-btn
                            @click="deleteItem(deleteItemRow)"
                            dark
                            color="red"
                            :loading="deleteButtonLoader"
                            depressed
                            class="mb-2 mx-1"
                        >
                            Löschen
                        </v-btn>
                        <v-btn
                            @click="SaveExcelRecord(editedRow)"
                            color="blue"
                            dark
                            :loading="saveButtonLoader"
                            depressed
                            class="mb-2 mx-1"
                        >
                            Speichern
                        </v-btn>
                    </template>
                    <v-card>
                        <v-card-title>
                            <span class="text-h5">{{ formTitle }}</span>
                        </v-card-title>
                        <v-divider></v-divider>
                        <v-card-text>
                            <v-container>
                                <HouseTextFields
                                    :editedItem="editedItem"
                                    @clear="close"
                                />
                            </v-container>
                        </v-card-text>
                        <v-divider></v-divider>
                        <v-card-actions>
                            <v-spacer></v-spacer>
                            <v-btn
                                color="blue darken-1"
                                text
                                @click="close"
                            >
                                Abrechen
                            </v-btn>
                            <v-btn
                                :loading="saveButtonLoader"
                                color="blue darken-1"
                                text
                                @click="save"
                            >
                                {{ editedItem?.id ? "Update" : "Speichern" }}
                            </v-btn>
                        </v-card-actions>
                    </v-card>
                </v-dialog>
                <v-dialog v-model="dialogDelete" max-width="500px">
                    <v-card>
                        <v-card-title class="text-h5"
                            >Bist du sicher diese Zeile zu löschen?</v-card-title
                        >
                        <v-card-actions>
                            <v-spacer></v-spacer>
                            <v-btn
                                color="blue darken-1"
                                text
                                @click="closeDelete"
                                >Abrechen</v-btn
                            >
                            <v-btn
                                color="blue darken-1"
                                text
                                :loading="deleteButtonLoader"
                                @click="deleteItemConfirm"
                                >OK</v-btn
                            >
                            <v-spacer></v-spacer>
                        </v-card-actions>
                    </v-card>
                </v-dialog>
            </v-toolbar>
            <v-divider></v-divider>
        </div>
     <vue-excel-editor

 ref="grid"
                :new-if-bottom="false"
                :allow-add-col="true"
                :no-header-edit="true"
                width="100%"
                v-model="dataItem"
                @cell-click="onRowDataChange"
                @update="updateRow"
                @select="rowSelected"
                :localized-label="myLabels"
                filter-row
            >

…….

     <vue-excel-editor






methods: {
    updateRow(val) {
        if (val && val.length > 0) {
            let arr = [];

            val.forEach((row) => {
                if (this.dataItem?.length) {
                    this.dataItem.find((el) => {
                        if (el.$id === row.$id) {
                            // delete $id.
                            delete el["$id"];

                            // Change date format
                            if (el.builddate)
                                el.builddate = moment(el.builddate).format("YYYY-MM-DD");
                            if (el.lastrenovation)
                                el.lastrenovation = moment(el.lastrenovation).format("YYYY-MM-DD");

                            if (el.created_at)
                                el.created_at = moment(el.created_at).format("YYYY-MM-DD");

                            if (el.updated_at)
                                el.updated_at = moment(el.updated_at).format("YYYY-MM-DD");

                            // Push in array
                            arr.push(el);
                        }
                    });
                }
            });

            console.log("row", arr);
            this.editedRow.data = [...arr];
        }
    },



    async SaveExcelRecord() {
        if (!this.editedRow.data || this.editedRow.data.length === 0) {
            // this.initToast("Nothing to save.", "info");
            return 'no data';
        }

        this.saveButtonLoader = true;

        try {
            // Assuming that the API supports batch update
            await axios.post(`http://127.0.0.1:8000/api/JsonBulk`, this.editedRow.data);
            this.initToast("Daten wurden aktualisiert und gespeichert!", "success");

            // reset
            this.editedRow = {
                index: -1,
                data: [],
            };

            // load all records
            this.getHouseRecords();

            this.close();
        } catch (error) {
            this.initToast("Daten konnten nicht aktualisiert werden", "error");
        } finally {
            this.saveButtonLoader = false;
        }
    },

}