管理者がVuetifyデータテーブルでユーザーを表示できる人材派遣会社向けのアプリケーションを作成しました。そのテーブルでは、ユーザーノートを表示したいのですが、長い場合があり、テーブルセルにうまく収まりません。ボタンをクリックして、ダイアログでメモを開きます。
問題は、200人のユーザーがいて、ボタンをクリックして「dialogNotes」を開くと、すべてのユーザーダイアログが開くことです。そのユーザーのダイアログのみが開くようにコードをどのように調整できますか?
<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>
データ:
dialogNote: false,
私の意見では、データテーブルとダイアログにVuetifyを使用する方がより適切でクリーンな方法です。
また、以下の例では、ユーザーを編集するときに、ユーザーごとにダイアログが開きます。
VuetifyはデータテーブルCRUDアクションを提供し、新しいアイテムを編集、削除、追加できます。詳細 こちらをご覧ください