在VueJS中单击切换类

Question

我正在学习Vuejs,我不断发现简单的事情,比如去除课堂是一种痛苦.请告诉我如何根据3个链接之间的点击添加或删除.active类.

在下面的示例中,添加工作正常,但它会将.active添加到所有链接,并且在再次单击时不会删除.

<div id="app">
  <h2>App</h2>
  <ul>
    <li><a href="#" class="link" :class="{ active: isActive }" @click="activeLink">Link text</a></li>
    <li><a href="#" class="link" :class="{ active: isActive }" @click="activeLink">Link text</a></li>
    <li><a href="#" class="link" :class="{ active: isActive }" @click="activeLink">Link text</a></li>
  </ul>
</div>

JS

var app = new Vue({
  el: '#app',
  data: {
    isActive: false
},
methods: {
  activeLink() {
    // the line below did not work
    // document.getElementsByClassName("active").isActive = false,
    this.isActive = true
  }
 }
})

JSfiddle在这里,https: //jsfiddle.net/s9r4q0gc/

Answer 1

您需要在方法中捕获事件处理程序并使用它,在这种情况下您可以引用被调用者即锚对象.

看小提琴:https://jsfiddle.net/s9r4q0gc/2/

activeLink(event) {
    if(event.target.className == "noclass")
    {
        event.target.className = "link active";
    }
    else
    {
        event.target.className = "noclass";
    }
  }

更新:

可以尝试这个小提琴,看看它是否击中靶心:https://jsfiddle.net/s9r4q0gc/4/

  var app = new Vue({
    el: '#app',
    data: {
      isActive: false
    },
    methods: {
      activeLink(event) {
        var checkboxes = document.getElementsByClassName ("noclass");

        for (var i=0; i<checkboxes.length; i++) {
           checkboxes[i].className = "link active";
           //checkboxes[i].className = "link";
        }
            event.target.className = "noclass";
      }
    }
  })