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

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

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

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