<template>
<ul>
<li>
<div class="link fir" @click="goToInstallation(); wtactiv()" v-bind:class="{ actived: isActive }" >Installation</div>
<ul v-if="currentLink === 'installation'">
<li>Process of Installation</li>
<li>Another Installation</li>
</ul>
</li>
<li>
<div class="link sec" @click="goToCommunication(); twoact()" v-bind:class="{ actived: twoActive }" >Communication</div>
<ul v-if="currentLink === 'okda'">
<li @click='activated'>Commun Submenu 1</li>
<li>Commun Submenu 2</li>
</ul>
</li>
<!-- <h1 class="static fir" @click="wtactiv" v-bind:class="{ actived: isActive }">первое</h1>
<h2 class="static sec" @click="twoact" v-bind:class="{ actived: twoActive }">второе</h2> -->
<h3>{{currentLink}}</h3>
</ul>
</template>
<script>
export default {
data() {
return {
twoActive: false,
isActive: false,
};
},
methods: {
twoact(){
this.isActive = false
this.twoActive = true
},
wtactiv(){
this.twoActive = false
this.isActive = true
},
goToInstallation() {
this.currentLink = "installation";
},
goToCommunication() {
this.currentLink = "okda";
},
},
};
</script>
<style scoped>
.grey{
color: #282c34;
}
.actived{
color: green;
}
.
.link {
color: #282c34;
cursor: pointer;
}
</style>
Дополнил код комментатора выше. Конечно, это на "костылях", т.к. там один метод другой зачищает, но если не делать вери-вери биг меню - то сойдёт.
