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://imgur.com/15wBSN3

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

1 个答案: