I am currently facing an issue with my Vue.js application. I have successfully implemented a data table where the content is fetched from an API call. After the app is mounted, I make the API call and populate an Array with the response data, which is then displayed in the table. Now, I want to introduce a feature that allows users to add notes to each row by opening a dialog box and passing the ID of the specific row to it for saving the note.
I managed to implement the dialog box without the ID functionality, so every row behaves the same way. However, I encountered a problem that I need to resolve before moving forward.
When I click on the button to open the dialog, the background appears very blurry, as shown in the image below.
https://i.sstatic.net/4sPbT.png
If I try to save and reopen the dialog multiple times, I receive an error message and the page becomes unresponsive. I have to open a new tab and revisit the link.
https://i.sstatic.net/gUv8t.png
The following code snippet shows the history component where every button resides:
<v-data-table
:headers="headers"
:items="history"
:search="search"
class="elevation-1"
>
<template v-slot:item.recording>
<v-dialog v-model="dialog" max-width="400px">
<template v-slot:activator="{ on, attrs }">
<v-btn
icon
small
@click="dialog = true"
v-bind="attrs"
v-on="on"
>
<v-icon small> mdi-content-save</v-icon>
</v-btn>
</template>
<NoteToHistoryDialog :noteId="noteId" v-on:close-card="dialog = false" />
</v-dialog>
<v-btn icon small @click="downloadAttachment">
<v-icon small> mdi-download</v-icon>
</v-btn>
</template>
</v-data-table>
Below is the code for the NoteToHistoryDialog component:
<template>
<v-main>
<v-card>
<v-card-title class="primary white--text">{{ $t("Add Note") }}{{ noteId }}</v-card-title>
<v-form>
<v-text-field
color="primary"
label="Text"
class="pr-4 pl-4"
v-model="note"
>
</v-text-field>
</v-form>
<v-card-actions class="justify-end">
<v-btn depressed plain color="primary white--text" @click="$emit('close-card')">
{{ $t("Close") }}
<v-icon>mdi-close</v-icon>
</v-btn>
<v-btn depressed plain color="primary white--text" @click="addNote">
{{ $t("Save") }}
<v-icon>mdi-content-save</v-icon>
</v-btn>
</v-card-actions>
</v-card>
</v-main>
</template>
At this point, everything seems to be functioning properly.
Additionally, here is an image showcasing the entire component. The dialog is triggered when clicking on the small disk icon.
https://i.sstatic.net/X2XQZ.png
Thank you for any suggestions or ideas to resolve the issue.