I developed a user-friendly application using Vue.js that allows users to explore books by selecting author names. I implemented a modal to showcase the books, but encountered an issue where clicking on different cards displayed the same image repeatedly. I attempted to resolve this problem by incorporating a loop with the following code:
<div class="modal" v-for="item in card">
<img v-bind:src="item.img" class="book-enlarge" alt="book" />
</div>
Below is my HTML code snippet:
<div
v-show="author === '' || author === item.author"
:class="{ active: author === item.author }"
v-for="(item, index) in card"
v-bind:data-index="index + 1"
@click="showModal(index)"
>
<img v-bind:src="item.img" alt="book" class="card__book" />
<div class="card__body">
<h1 class="card__title">{{ item.title }}</h1>
<p class="card__author">
<span class="card__author--mod">By:</span>
{{ item.author }}
</p>
<p class="card__release">
<span class="card__release--mod">Release Date:</span>
{{ item.release }}
</p>
</div>
<form v-bind:action="item.link" target="_blank">
<input class="btn" type="submit" value="Buy on Amazon" />
</form>
</div>
<div class="overlay" id="overlay">
<div ref="close" @click="close" class="overlay__close">
⊗
</div>
<div class="modal" v-for="item in card">
<img v-bind:src="item.img" class="book-enlarge" alt="book" />
</div>
</div>
Here's how I structured my Vue.js code:
const cardDescriptions = [
{
img: '../books-img/book-1.jpg',
title: 'A Life on Our Planet: My Witness Statement and a Vision for the Future',
author: 'David Attenborough',
release: '2020-10-01',
link: 'https://www.amazon.co.uk/Life-Our-Planet-Witness-Statement/dp/1529108276/ref=sr_1_1?dchild=1&keywords=a+life+on+our+planet&qid=1610306225&quartzVehicle=45-608&replacementKeywords=a+on+our+planet&sr=8-1',
},
{
img: '../books-img/book-2.jpg',
title: 'Life on Air',
author: 'David Attenborough',
release: '2010-05-20',
link: 'https://www.amazon.co.uk/Life-Air-David-Attenborough/dp/1849900019/ref=sr_1_1?dchild=1&keywords=life+on+air&qid=1610306334&quartzVehicle=45-608&replacementKeywords=on+air&sr=8-1',
},
{
img: '../books-img/book-3.jpg',
title: 'HTML, CSS and JavaScript in easy steps',
author: 'Mike McGrath',
release: '2020-08-06',
link: 'https://www.amazon.co.uk/HTML-CSS-JavaScript-easy-steps/dp/184078878X/ref=sr_1_1?dchild=1&keywords=HTML%2C+CSS+and+JavaScript+in+easy+steps%3A+%28In+Easy+Steps%29&qid=1610306384&sr=8-1',
},
{
img: '../books-img/book-4.jpg',
title: 'HTML5 in easy steps, 2nd edition',
author: 'Mike McGrath',
release: '2017-02-17',
link: 'https://www.amazon.co.uk/HTML5-easy-steps-Mike-McGrath/dp/1840787546/ref=sr_1_1?dchild=1&keywords=HTML5+in+easy+steps%3A+%282nd+edition%29&qid=1610306431&sr=8-1',
},
];
new Vue({
el: '#container',
data: {
card: cardDescriptions,
author: '',
},
methods: {
displayBooks: function (e) {
this.author = e.target.value;
},
showModal: function (index) {
document.querySelector('#overlay').style.display = 'block';
console.log(index + 1);
},
},
computed: {
filteredNames: function () {
const authors = [];
this.card.forEach(item => {
if (!authors.includes(item.author)) {
authors.push(item.author);
}
});
return authors;
},
},
});
new Vue({
el: '#overlay',
data: {
card: cardDescriptions,
},
methods: {
close: function () {
const closeModal = this.$refs.close.parentNode;
closeModal.style.display = 'none';
},
},
});
If anyone could provide assistance with this issue, it would be highly appreciated!
Thank you in advance!