如何在VueJS中将类添加到项目

Question

https://codepen.io/nuzze/pen/yLBqKMY My problem is the next one: I have this list on my Vue data:

{
    name: 'Camp Nou',
    id: 'campNou'
},
{
    name: 'Abran cancha',
    id: 'abranCancha'
}

And I have a external function to adding class 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 button "add to favorites", "unfavorite" class is added to the item selected, and then, if you click the button "remove from favorites", "unfavorite" class is removed and "favorite" class it's added. Well, I want to get the same thing but with Vue. I mean, I don't want to create functions for each item, I want a function that automatically adds the class to the selected item. Please I need heelp with this.

Thanks and sorry for my poor english :(

Answer 1

I forked your pen with the solution

https://codepen.io/christiancazu/pen/mdbjLVN