We have developed an application for a staffing agency that allows the Admin to view Users in a Vuetify data table. However, when displaying User Notes in the table, we encounter issues with long notes not fitting well within a table cell. Our goal is to implement a feature where clicking a button will open the User Notes in a dialog.
The challenge we face is that if there are 200 users and we click the button to open the "dialogNotes", every user's dialog opens simultaneously. How can we modify our code so that only the dialog for the selected user opens?
<template slot="items" slot-scope="props">
<td>
<v-checkbox
primary
hide-details
v-model="props.selected"
></v-checkbox>
</td>
<td>{{props.item.status}}</td>
<td>
<img v-if="props.item.photoUrl" :src="props.item.photoUrl" class="user-img">
<img v-if="!props.item.photoUrl" src="/static/avatar.png" class="user-img">
</td>
<td>
<router-link v-if="props.item.name" v-bind:to="'/staff/' + props.item.id">{{ props.item.name }}</router-link>
<router-link v-if="!props.item.name" v-bind:to="'/staff/' + props.item.id">{{ props.item.id }}</router-link>
</td>
<td>
<v-btn icon color="primary" small @click.stop="dialogNote = true"><v-icon small>open_in_new</v-icon></v-btn>
<v-dialog v-model="dialogNote" scrollable lazy max-width="500" :key="props.item.id">
<v-card>
<v-card-title>
<span>{{ props.item.name }} Note</span>
</v-card-title>
<v-card-text>
{{props.item.note}}
</v-card-text>
<v-card-actions>
<v-btn color="primary" flat @click.stop="dialogNote=false">Close</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</td>
<td>{{props.item.greek}}</td>
<td>
<span v-if="props.item.tipsUrl">Yes</span>
</td>
<td>{{props.item.waiver}}</td>
<td>{{props.item.media}}</td>
<td>{{ props.item.howHear }}</td>
</template>
data:
dialogNote: false,