Javascript Vue中单击的目标元素

在Vue.js中，如何定位/检测单击的元素以执行基本切换类

我已经编写了这个成功切换的类，但是当您单击

a

时，该类将应用于所有

li

HTML

我是Vue的新手

编辑

我设法让它与下面的帮助组合工作，但我似乎无法得到切换效果

  <ul id="app" class="projects">
    <li :class="{show:selected == 1}">
      <a href="" @click.prevent.stop="selected = 1" >Exposure</a>
    </li>
    <li :class="{show:selected == 2}">
      <a href="" @click.prevent.stop="selected = 2" >Exposure</a>
    </li>
    <li :class="{show:selected == 3}">
      <a href="" @click.prevent.stop="selected = 3" >Exposure</a>
    </li>        
  </ul>

---

您可以将元素传递给函数（

$event

）：

：单击=dyClass（$event）

，然后进入计算：

dyClass: function(event) {
    event.target.toggleClass('whatever')
}

---

据我所知，您有一些

li

项，您希望在单击特定的

li

时添加一个活动类

解决方案：

“html”部分：

然后向“活动”类添加一些css

---

更多信息，我得到一个未定义的“toggleClass”错误。如果有更好的方法实现同样的结果，我洗耳恭听。toggleClass（）是一种jQuery方法。对于vanilla JS，您可以使用event.target.classList.toggle（'which'）将同一类绑定到每次单击事件。因此，如果单击任何项，它将切换类的当前状态（每个项都有）。您需要通过一个唯一的ID来确定每个列表项的目标。很抱歉延迟。这很有效。。但我确实觉得可以更简单一些？我确实想出了一些办法。去邮局。

  <ul id="app" class="projects">
    <li :class="{show:selected == 1}">
      <a href="" @click.prevent.stop="selected = 1" >Exposure</a>
    </li>
    <li :class="{show:selected == 2}">
      <a href="" @click.prevent.stop="selected = 2" >Exposure</a>
    </li>
    <li :class="{show:selected == 3}">
      <a href="" @click.prevent.stop="selected = 3" >Exposure</a>
    </li>        
  </ul>

  new Vue({
    el: '#app',
    data: {
      selected: false,
    }
  });

dyClass: function(event) {
    event.target.toggleClass('whatever')
}

<div id="app">
  <ul class="projects">
    <li v-for="project in projects"
        :key="project.id"
        :class="{ active: project.id === activeProjectId }"
        @click="activeProjectId = project.id"
    >
      <a href="#">{{ project.name }}</a>
    </li>
  </ul>
</div>

new Vue({
  el: "#app",
  data: {
        projects: [
     { id: 1, name: 'Project A' },
     { id: 2, name: 'Project B' },
     { id: 3, name: 'Project C' },
     { id: 4, name: 'Project D' },
    ],
    activeProjectId: 1
  },

})