Vue中的目标点击元素

Question

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

我已经写了这个切换成功但是当你点击一个a时，这个类被应用到所有li的

HTML

  <ul id="app" class="projects">
    <li v-bind:class="dyClass"><a href="" v-on:click.prevent.stop="show = !show">Project A</a></li>
    <li v-bind:class="dyClass"><a href="" v-on:click.prevent.stop="show = !show">Project B</a></li>
    <li v-bind:class="dyClass"><a href="" v-on:click.prevent.stop="show = !show">Project C</a></li>
    <li v-bind:class="dyClass"><a href="" v-on:click.prevent.stop="show = !show">Project D</a></li>   </ul>

JS

  new Vue({
    el: '#app',
    data: {
      show: false,
    },
    computed: {
      dyClass: function() {
        return {
          show: this.show
        }
      }
    }
  })

我是 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>

和

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

Answer 1

据我了解，您有一些 li 项目，并且您希望在单击特定 li 时添加一个活动类。

解决方案：

“html”部分：

<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>

“vue”部分

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
  },

})

然后将一些 css 添加到 'active' 类中。

更多信息，See the fiddle

Answer 2

您可以将元素传递给函数 ($event)：

:click=dyClass($event) 然后在计算中：

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