javascript - Vuejs 2.x 单击非 ul 链接时如何删除事件类

Question

我正在尝试从所有具有相同类的 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 中删除事件类。

Answer 1

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 时输入条件