前提・実現したいこと
・前提
dialog: falseとしてdialogの状態を定義し、v-btnのLearn Moreボタンをクリックすると@click.stop="dialog = true"が発動し、dialogが表示される仕組みになっています。
・実現したいこと
その上で、
v-forで配列を回した情報をVuetifyのDialogsコンポーネントで表示したい。
発生している問題・エラーメッセージ
@click.stop="dialog = true"が埋め込まれている「Learn More」をクリックすると違う情報が表示されてしまう。
dialog内ではv-forで回した情報を表示させたいのですが、うまくいきません。
v-forの中にv-dialogを書いていて、複数v-dialogが生成されているからうまくいってないのだと考えておりますが、対処法が思い浮かびません。。
該当のソースコード
vue
1<template> 2 <div class="main-contents"> 3 <div v-show="loading" class="loader"></div> 4 <div class="card" v-for="(book,index) in books" v-show="!loading" :key='index'> 5 <v-responsive :aspect-ratio="16/9"> 6 <v-card 7 class="mx-auto" 8 outlined 9 elevation 10 :width="200" 11 :height="300" 12 > 13 <v-card-title class="align-end" style="font-size:12px;max-height:50px;">{{book.title}}</v-card-title> 14 <v-img 15 class="white--text" 16 height="200px" 17 contain 18 v-bind:src="book.img_url" 19 > 20 </v-img> 21 <v-card-actions> 22 <v-btn @click.stop="dialog = true"> 23 Learn More 24 </v-btn> 25 </v-card-actions> 26 </v-card> 27 </v-responsive> 28 <v-dialog v-model="dialog" max-width="300px" activator> 29 <v-card> 30 <v-card-title> 31 <div>{{ book.title }}</div> 32 </v-card-title> 33 <v-divider></v-divider> 34 <v-card-text>{{ book.description }}</v-card-text> 35 <v-btn @click.stop="dialog = false"> 36 停止 37 </v-btn> 38 <v-spacer></v-spacer> 39 </v-card> 40 </v-dialog> 41 </div> 42 </div> 43</template> 44export default { 45name: "book", 46 data () { 47 return { 48 books: [ { "id": "2rcxZEyX95m6zquVsqBS", "title": "LPICレベル1", "description": "101&102試験の出題範囲を網羅。やさしい解説と豊富な用例・練習問題。模擬試験各1回分を掲載。", "price": 4104, "isbn": "9784798141916", "img_url": "https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/1916/9784798141916.jpg?_ex=200x200" }], 49 loading: true, 50 dialog: false 51 } 52 }, 53}
試したこと
v-dialogと配列で回っているindexなどを結びつけようと考えていますが、実現できませんでした。

回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/09/23 12:16