Как добавить и удалить класс по нажатию по кнопке?

Question

[alaskafx]

Имеется код:

<template>
<div id='table'>
    <h4></h4>
    <ul id="progress">
    <li><div class="node first green activated"></div><router-link class="f-r-link" to="/about"> Установка</router-link></li>
    <li><div class="divider grey"></div></li>
    <li><div class="node second grey"></div><router-link to="/about"> Введение</router-link></li>
    <li><div class="divider grey"></div></li>
</ul>
<router-link class='bnxt' to='/next'>Далее</router-link>
</div>
</template>

<script>
export default {
        name: 'TableName',
    props: {
    msg: String
    }}

</script>

<style scoped>

.f-r-link{
    color: #42b983;
    text-decoration: none;
    font-size: 14px;
    text-align: center; 
    line-height: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}
#table{
    
    position: relative;
    right: 30%;
    top: 23vmax;
}
*, *:after, *:before { margin:0; padding:0; }
body { 
    padding: 15px; 
    font-family: Helvetica, sans-serif;
}

input[type="button"] {
    margin-top: 20px;
}
.node {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    display:inline-block;
    transition: all 1000ms ease;
}

.activated {
    box-shadow: 0px 0px 3px 2px rgba(194, 255, 194, 0.8);
}

.divider {
    height: 40px;
    width: 2px;
    margin-left: 4px;
    transition: all 800ms ease;
}

li p {
    display:inline-block;
    margin-left: 25px;
}

li {
    list-style: none;
    line-height: 1px;
}

.green{ background-color: rgba(92, 184, 92, 1); }
.grey { background-color: rgba(201, 201, 201, 1); }
</style>

Дело в том, что нужно, когда пользователь нажал на router-link с классом "bnxt" - добавлялся к диву с классами "node second grey" класс "activated", а у дива с классами "node first green" - удалялся.
Пробовал, читал, смотрел - но всё никак не идёт, ну вот просто ни в какую.

Answer 1

[WapSter]

Но такой принцип так себе, когда используешь vue, но придумывать за тебя мне лень. Я использовал события, для роутера лучше использовать хуки

Comments

[alaskafx]

Спасибо огромное!
Я, конечно, наверное, обнаглел, но не мог ли бы ты написать для роутера?
Если напишешь - то я, а так же наверное кто-либо узнал бы нового.

[WapSter]

alaskafx, нет не узнает, так хуки роутера легко гугляться, а ctrl+c/v думаю большинство делать умеет