https://codepen.io/nuzze/pen/yLBqKMY Here's my issue at hand: I currently have the following list stored in my Vue data:
{
name: 'Camp Nou',
id: 'campNou'
},
{
name: 'Abran cancha',
id: 'abranCancha'
}
Alongside an external function that adds classes to both items:
var abranCanchabutton = $(".abranCancha-fav");
var campNoubutton = $(".campNou-fav");
window.onload = () => {
//abranCancha
if (localStorage.getItem('abranCancha')=='true') {
abranCanchabutton.removeClass("favorite");
abranCanchabutton.addClass("unfavorite");
document.getElementById('abranCancha').classList.add('favorites');
abranCanchabutton.attr("onclick", "quitabranCancha()");
}
else {
abranCanchabutton.removeClass("unfavorite");
abranCanchabutton.addClass("favorite");
abranCanchabutton.attr("onclick", "favabranCancha()");
}
//campNou
if (localStorage.getItem('campNou')=='true') {
campNoubutton.removeClass("favorite");
campNoubutton.addClass("unfavorite");
document.getElementById('campNou').classList.add('favorites');
campNoubutton.attr("onclick", "quitcampNou()");
}
else {
campNoubutton.removeClass("unfavorite");
campNoubutton.addClass("favorite");
campNoubutton.attr("onclick", "favcampNou()");
}
}
//functions
function favabranCancha() {
document.getElementById('abranCancha').classList.add('favorites');
localStorage.setItem('abranCancha', 'true');
abranCanchabutton.removeClass("favorite");
abranCanchabutton.addClass("unfavorite");
abranCanchabutton.attr("onclick", "quitabranCancha()");
}
function quitabranCancha() {
document.getElementById('abranCancha').classList.remove('favorites');
localStorage.removeItem('abranCancha');
abranCanchabutton.removeClass("unfavorite");
abranCanchabutton.addClass("favorite");
abranCanchabutton.attr("onclick", "favabranCancha()");
}
function favcampNou() {
document.getElementById('campNou').classList.add('favorites');
localStorage.setItem('campNou', 'true');
campNoubutton.removeClass("favorite");
campNoubutton.addClass("unfavorite");
campNoubutton.attr("onclick", "quitcampNou()");
}
function quitcampNou() {
document.getElementById('campNou').classList.remove('favorites');
localStorage.removeItem('campNou');
campNoubutton.removeClass("unfavorite");
campNoubutton.addClass("favorite");
campNoubutton.attr("onclick", "favcampNou()");
}
So, when you click the "add to favorites" button, the "unfavorite" class is added to the selected item. Similarly, clicking "remove from favorites" removes the "unfavorite" class and adds the "favorite" class back. I'd like to achieve the same functionality using Vue without having to create separate functions for each item. Any help with this would be greatly appreciated.
Thank you and apologies for any language shortcomings :(