在vuetify中显示不同卡的标题

Question

如何显示对数据库中的数据进行v对话？

<v-row class="albumLayout">
            <div v-for="(album, index) in allAlbums" :key="index">
              <v-col>
                <v-card>
                  <v-card-title>{{album.ALBUM}}</v-card-title>

                  <v-btn color="green" style="margin:10px" @click="dialog = !dialog">VIEW ALBUM</v-btn>

                  <v-btn color="red" style="margin:10px">DELETE ALBUM</v-btn>

                  <v-dialog v-model="dialog">
                    <v-card>
                      <v-card-title>{{album.ALBUM}}</v-card-title>
                    </v-card>
                  </v-dialog>
                </v-card>
              </v-col>
            </div>
</v-row>

到目前为止，每当我单击每张卡的查看相册按钮时，它只会显示I AM TITLE＃3。

问题是，如何更改显示每个特定卡的标题。

Answer 1

您的点击处理程序需要做两件事：设置相册并显示对话框。

1. 将selectedAlbum：null添加到您的数据中
2. 要打开单击对话框，请设置selectedAlbum = album
3. 将对话框模型设置为!! selectedAlbum，仅在设置相册时显示
4. 在对话框中使用selectedAlbum代替相册
5. 要关闭，将selectedAlbum设置为null