Vuejs 2.x单击非ul链接时如何删除活动类答案

【问题标题】：Vuejs 2.x How to remove active class when click on non ul linkVuejs 2.x单击非ul链接时如何删除活动类
【发布时间】：2018-08-10 13:15:43
【问题描述】：

我正在尝试从具有相同类的所有 Li 中删除活动类，但在 vuejs 2.x 中无法获得正确的代码来执行此操作。

我的代码示例在这里： jsfiddle

var app = new Vue({
  el:"#app",
  data:{
    active_el:0
  },
  methods:{
    activate:function(el){
    	if(el === 0) {
        // remove active class from all Ul>>Li
        }else {
        this.active_el = el;
        }
    }
  }
});

ul > li:hover {
  cursor:pointer;
}
.active {
  color:red;
  font-weight:bold;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
<a href="#" @click.native="activate(0)" :class="{ active : active_el == 0 }">link 0</a>
 <ul>
    <li @click="activate(1)" :class="{ active : active_el == 1 }">Link 1</li>
    <li @click="activate(2)" :class="{ active : active_el == 2 }">Link 2</li>
    <li @click="activate(3)" :class="{ active : active_el == 3 }">Link 3</li>
  </ul>
  
  <ul>
    <li @click="activate(4)" :class="{ active : active_el == 4 }">Link 1</li>
    <li @click="activate(5)" :class="{ active : active_el == 5 }">Link 2</li>
    <li @click="activate(6)" :class="{ active : active_el == 6 }">Link 3</li>
  </ul>
</div>

点击link0时，应从Ul标签下的所有li中删除活动类。

【问题讨论】：

标签： javascript html vue.js vuejs2

【解决方案1】：

只需删除 .native 标记，因为 <a> 本身就是一个原生元素。此外，您可以简化 activate 方法：

var app = new Vue({
  el:"#app",
  data:{
    active_el:0
  },
  methods:{
    activate:function(el){
        this.active_el = el;
    }
  }
});

ul > li:hover {
  cursor:pointer;
}
.active {
  color:red;
  font-weight:bold;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
<a href="#" @click="activate(0)" :class="{ active : active_el == 0 }">link 0 {{ active_el }}</a>
 <ul>
    <li @click="activate(1)" :class="{ active : active_el == 1 }">Link 1</li>
    <li @click="activate(2)" :class="{ active : active_el == 2 }">Link 2</li>
    <li @click="activate(3)" :class="{ active : active_el == 3 }">Link 3</li>
  </ul>
  
  <ul>
    <li @click="activate(4)" :class="{ active : active_el == 4 }">Link 1</li>
    <li @click="activate(5)" :class="{ active : active_el == 5 }">Link 2</li>
    <li @click="activate(6)" :class="{ active : active_el == 6 }">Link 3</li>
  </ul>
</div>

【讨论】：

【解决方案2】：

var app = new Vue({
  el:"#app",
  data:{
    active_el:0
  },
  methods:{
    activate:function(el){

    	this.active_el = el;

        /*if(el === 0) {
        // remove active class from all Ul>>Li
        this.active_el = 0;
        }else {
        this.active_el = el;
        }*/
    }
  }
});

ul > li:hover {
  cursor:pointer;
}
.active {
  color:red;
  font-weight:bold;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

<div id="app">
<p href="#" @click="activate(0)" :class="{ active : active_el == 1 }">link 0</p>
<br/> <br/>
 <ul>
    <li @click="activate(1)" :class="{ active : active_el == 1 }">Link 1</li>
    <li @click="activate(2)" :class="{ active : active_el == 2 }">Link 2</li>
    <li @click="activate(3)" :class="{ active : active_el == 3 }">Link 3</li>
  </ul>
  <br/> <br/>
  <ul>
    <li @click="activate(4)" :class="{ active : active_el == 4 }">Link 1</li>
    <li @click="activate(5)" :class="{ active : active_el == 5 }">Link 2</li>
    <li @click="activate(6)" :class="{ active : active_el == 6 }">Link 3</li>
  </ul>
</div>

我想你只是忘记输入el === 0时的条件

【讨论】：

对于这个例子，你甚至不需要 if 和 else，因为第一个链接会发出一个 0 作为函数参数。
我试过了，不幸的是它不起作用。您可以查看共享的 jsfiddle 链接。

【解决方案3】：

如果你将 console.log 添加到 activate 函数中，你会看到 a 标签中的 @click.native 不起作用。我删除了“.native”（+ if else），剪掉的对我有用。

有关 .native 的更多信息： Vue @click.native not working?

var app = new Vue({
  el:"#app",
  data:{
    active_el:0
  },
  methods:{
    activate:function(el){
        console.log(el);
    	this.active_el = el;
    }
  }
});

ul > li:hover {
  cursor:pointer;
}
.active {
  color:red;
  font-weight:bold;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
<a href="#" @click="activate(0)" :class="{ active : active_el == 0 }">link 0</a>
 <ul>
    <li @click="activate(1)" :class="{ active : active_el == 1 }">Link 1</li>
    <li @click="activate(2)" :class="{ active : active_el == 2 }">Link 2</li>
    <li @click="activate(3)" :class="{ active : active_el == 3 }">Link 3</li>
  </ul>
  
  <ul>
    <li @click="activate(4)" :class="{ active : active_el == 4 }">Link 1</li>
    <li @click="activate(5)" :class="{ active : active_el == 5 }">Link 2</li>
    <li @click="activate(6)" :class="{ active : active_el == 6 }">Link 3</li>
  </ul>
</div>

【讨论】：