Vuejs 2.x как удалить активный класс при нажатии на ссылку, отличную от ul

Я пытаюсь удалить активный класс из всех, что у Ли один и тот же класс, но не могу получить правильный код для этого в 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>

Активный класс должен быть удален из всех li под тегом Ul при щелчке по link0.

1
0
1 193
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

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 как параметр функции.

Bennett Dams 10.08.2018 15:22

Я пробовал это, к сожалению, не работает. вы можете посмотреть общую ссылку jsfiddle.

Ravi Anand 10.08.2018 15:26
Ответ принят как подходящий

Если вы добавите console.log к функции активации, вы увидите, что @ click.native в теге a не работает. Я удалил '.native' (+ if else), и у меня все работает.

Дополнительная информация о .native: Vue @ click.native не работает?

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>

Просто удалите тег .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>

Другие вопросы по теме