Vue.jsとMicromodal.jsを使い、コンテンツ検索し、コンテンツ内の画像クリックで同じ画像をモーダルで拡大表示
Q&A
Closed
Vue.jsを使い、コンテンツ検索し、コンテンツ内の画像クリックで同じ画像をモーダルで拡大表示されるようにしたい。
現在Vueを使って格納されている画像（複数ある）を表示し、
それをマイクロモーダル機能を使い、画像1をクリックすると画像1が拡大表示されるようにしたいのですが、画像自体はそれぞれの画像(画像1、画像2、画像3など)が表示されるのですが、どの画像をクリックしても画像1が拡大表示されてしまいます。本当は画像2をクリックすると画像２が拡大表示されるようにしたいです。
ちなみにVueは検索機能を使いたかったので組み込んでます。
もし解決方法をご存知の方がいらっしゃいましたら
解決方法を教えて下さると幸いです。
発生している問題・エラー
画像1をクリック→画像1が拡大表示
画像2をクリック→画像1が拡大表示
画像3をクリック→画像1が拡大表示
恐らくVueの記述を変えればいけると思うので
該当の箇所のみ載せておきます。
img :src="rapper.rapperImg"の箇所が２箇所あるのですが、これをどうにか弄れば良いと思うのですが、どのように書き換えれば良いか検討もつかず困っています。
<div id="app">
<input class="searchBox" type="text"placeholder=" 検索" v-model="keyword">
<div class="cardWrapper">
<div class="card" v-for="rapper in filteredRappers" :key="rapper.id">
<div class="icon" data-micromodal-trigger="modal-ArtistImg"><img :src="rapper.rapperImg"></div>
<div class="micromodal-slide" id="modal-ArtistImg">
<div style="z-index:2;" class="modal__overlay" data-micromodal-close>
<div class="modal__container">
<div class="modal__inner">
<header class="modal__header"><button class="modal__close"data-micromodal-close></button></header>
<main class="modal__content"><img :src="rapper.rapperImg"></main>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/micromodal/dist/micromodal.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
keyword: '',
rappers: [
{
id: 1,
name: 'TAROU',
rapperImg:'./images/TAROU.jpg',
},
{
id: 2,
name: 'SUZUKI',
rapperImg:'./images/SUZUKI.jpg',
},
{
id: 3,
name: 'TANAKA',
rapperImg:'./images/TANAKA.jpg',
},
]
},
computed: {
filteredRappers: function() {
var rappers = [];
for(var i in this.rappers) {
var rapper = this.rappers[i];
if(rapper.name.indexOf(this.keyword) !== -1) {
rappers.push(rapper);
}
}
return rappers;
}
}
});
MicroModal.init({
disableScroll: true,
awaitOpenAnimation: true,
awaitCloseAnimation: true
});
</script>
0 likes
