如何在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