teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

回答を受けて修正した点を追記しました。

2019/08/19 10:29

投稿

honyao
honyao

スコア40

title CHANGED
File without changes
body CHANGED
@@ -75,4 +75,27 @@
75
75
  </script>
76
76
  ```
77
77
  `showLightbox`内の`show(imageName)`のところで画像のパスを渡せていないと思われるのですが,どのように設定したらクリック後の画像が表示されるでしょうか.
78
- ご教授いただければ幸いです.
78
+ ご教授いただければ幸いです.
79
+
80
+ #追記
81
+ 回答を受けての修正です。
82
+ App.vue
83
+ ```
84
+ // template
85
+ <img v-for="thumb in filteredImages" :key="thumb.id" @click="showLightbox(thumb.name)" :src="thumb.name" :alt="thumb.alt" :title="thumb.alt" />
86
+
87
+ // script
88
+ var imageList = [
89
+ {'name': require('@/assets/gazo1.png'), 'alt':'画像1', 'filter':'nature', 'id':'image1' },
90
+ { ~画像2 省略~ }
91
+ ];
92
+
93
+ // export default
94
+ data () {
95
+ return {
96
+ // thumbnailDir は削除
97
+ images: imageList,
98
+ galleryFilter: 'all',
99
+ }
100
+ },
101
+ ```