I am currently working on developing web applications using the Pixabay API. My goal is to allow users to mark an image as a favorite and have the heart icon change color to red accordingly. However, I seem to be facing issues with this functionality.
To achieve this, I am utilizing the makeFav() method to add another boolean property called liked to the existing data.
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: {
api: 'https://pixabay.com/api/?key=XXXXXXXXXXXXXX',
images: null,
},
mounted() {
this.getImages()
},
methods:{
getImages: function(){
if(localStorage.images){
this.images = JSON.parse(localStorage.images)
console.log("Local Image")
}
else{
axios.get(this.api)
.then(response => (
this.images = response.data.hits,
localStorage.images = JSON.stringify(this.images),
console.log("API Image")
))
.catch(error => (console.log(error)))
}
},
makeFav: function(i){
this.images[i].liked = !this.images[i].liked
},
}
})
Within the HTML structure, I am implementing Vuetify cards and checking the color property for the heart icon but encountering difficulties in getting it to work properly.
<v-col md="3" sm="6" v-for="(image, i) in images" :key="image.id">
<v-card>
<v-img :src="image.previewURL">
</v-img>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn icon @click="makeFav(i)">
<v-icon :color="image.liked ? 'red' : ''">mdi-heart</v-icon>
{{image.likes}}
</v-btn>
<v-btn icon @click="downloadWithAxios(image.largeImageURL)">
<v-icon>mdi-download</v-icon>
</v-btn>
</v-card-actions>
</v-card>
</v-col>