javascript - 如何在 VueJS 中向项目添加类

Question

https://codepen.io/nuzze/pen/yLBqKMY我的问题是下一个:我的 Vue 数据中有这个列表:

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

我有一个外部函数可以为这两个项目添加类:

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()");
}

因此，当您单击“添加到收藏夹”按钮时，“不喜欢的”类别将添加到所选项目中，然后，如果您单击“从收藏夹中删除”按钮，“不喜欢的”类别将被删除，“最喜欢的”类别将被删除“已添加类。好吧，我想通过 Vue 得到同样的东西。我的意思是，我不想为每个项目创建函数，我想要一个自动将类添加到所选项目的函数。请帮我解决这个问题。

感谢并为我糟糕的英语感到抱歉:(

Answer 1

I forked your pen with the solution

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