Vuetifyのv-dialogをv-forの任意アイテムごとに用意する
Vuetifyのv-forの中でv-dialogを書いたら、こちらの記事と同じ状態になった ベストアンサーにある通り、v-forの外に出して、フラグ管理で表示させるようにして解決した
code:sample.html
<div id="app">
<div class="card" v-for="(book, index) in books" :key="index">
<v-btn @click.stop="onClickBtn(book)">LearnMore</v-btn>
</div>
<v-dialog v-model="dialog" v-if="currentBook" max-width="300px" activator>
<v-card>
<v-card-title>{{ currentBook.title }}</v-card-title>
<v-card-actions>
<v-btn block @click="dialog = false">close</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
code:sample.js
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
dialog: false,
currentBook: null,
books: [
{ title: 'book1' },
{ title: 'book2' },
{ title: 'book3' }
]
}),
methods: {
onClickBtn(book) {
this.currentBook = book
this.dialog = true
}
}
})
2022/2 にページ作成していて、2022/10 にも同じ問題でググってこのページで解決した