We've build an application for a staffing company where Admin can view Users in a Vuetify data table. In that table, we want to show User Notes, but they are sometimes long and don't fit well into a table cell. We would like to simply click a button and open the Notes in a dialog.

The problem is that if we have 200 users, and we click the button to open dialogNotes, every user dialog opens. How can we adjust our code so that only the dialog for that 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,