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

时忘记输入条件了

Answer 2

只需删除.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>

Answer 3

如果将console.log添加到激活功能，您将看到a标记中的@ click.native不起作用。我删除了“ .native”（+如果是其他语言），则该代码段对我有用。

有关.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>