如何在 VueJS 中为项目添加类答案

【问题标题】：How to add class to an item in VueJS如何在 VueJS 中为项目添加类
【发布时间】：2020-01-16 17:38:00
【问题描述】：

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 得到同样的东西。我的意思是，我不想为每个项目创建函数，我想要一个自动将类添加到所选项目的函数。请帮我解决这个问题。

感谢和抱歉我的英语不好:(

【问题讨论】：

请包括您在 Vue 中实现此功能的尝试。
codepen.io/nuzze/pen/yLBqKMY
将 onClick 与 event.target 一起使用并添加类，或者在列表中的每个项目上使用带有样式条件或类条件的带有映射的数组

标签： javascript vue.js

【解决方案1】：

I forked your pen with the solution

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

【讨论】：

太好了！！！谢谢，但
中没有添加“收藏夹”类。你能更新笔吗？谢谢你，再次

我没有在你的 CSS 样式中找到任何名为“favorites”的类。

我的意思是，如果你检查我的笔，当你点击fav按钮时，一个“favorites”类被添加到