link411 link412 link413 link414 link415 link416 link417 link418 link419 link420 link421 link422 link423 link424 link425 link426 link427 link428 link429 link430 link431 link432 link433 link434 link435 link436 link437 link438 link439 link440 link441 link442 link443 link444 link445 link446 link447 link448 link449 link450 link451 link452 link453 link454 link455 link456 link457 link458 link459 link460 link461 link462 link463 link464 link465 link466 link467 link468 link469 link470 link471 link472 link473 link474 link475 link476 link477 link478 link479 link480 link481 link482 link483 link484 link485 link486 link487 link488 link489 link490 link491 link492 link493 link494 link495 link496 link497 link498 link499 link500 link501 link502 link503 link504 link505 link506 link507 link508 link509 link510 link511 link512 link513 link514 link515 link516 link517 link518 link519 link520 link521 link522 link523 link524 link525 link526 link527 link528 link529 link530 link531 link532 link533 link534 link535 link536 link537 link538 link539 link540 link541 link542 link543 link544 link545 link546 link547

[Vue.js] Change component state form another component rendered in a v-for

there is a list of componnents rendered ina a v-for. to set the “show” boolean property as false in the other components when one of them is set to true:
To simplify when only adding two components

Main component code:

<template>
<aside class=”main-sidebar”>
<section class=”sidebar”>
<ul class=”sidebar-menu” data-widget=”tree”>
<nav-bar-user-profile-item></nav-bar-user-profile-item>
<nav-bar-item></nav-bar-item>
<nav-bar-item></nav-bar-item>
</ul>
</section>
</aside>
</template>

<script>
import NavBarUserProfileItem from ‘@/components/NavBar/NavBarUserProfileItem’;
import NavBarItem from ‘@/components/NavBar/NavBarItem’;

export default {
name: ‘NavBar’,
components: {
NavBarUserProfileItem,
NavBarItem
},
methods: {
MenuHasBeenToggled(event) {
console.log(event);
}
}
}

NavBarItemComponent

<template>
<li class=”treeview2 item” :class=”{‘menu-open’: isOpen, ‘active’: menu.active}” @click=”ToggleState”>
<a href=”#”>
<i class=”fa fa-th”></i>
<span>{ menu.title }</span>
<span class=”pull-right-container”>
<i class=”fa fa-angle-right pull-right”></i>
</span>
</a>
<collapse-transition>
<ul class=”treeview-menu” v-show=”isOpen”>
<li v-for=”submenu in menu.submenus” :key=”submenu.title” :class=”{‘active’: ((‘active’ in submenu) ? submenu.active : false)}”>
<b-link :href=”submenu.link”>
<i class=”fa fa-circle-thin”></i>
{ submenu.title }
</b-link>
</li>
</ul>
</collapse-transition>
</li>
</template>

<script>

export default {
name: ‘NavBarItem’,
data: function () {
return {
isOpen: false
}
},
computed: {

},
methods: {
ToggleState() {
this.isOpen = !this.isOpen;
this.$emit(“toggle-state”);
}
},
props: {
menu: {
type: Object,
default: function() {
return {
link: “#”,
title: “Main menu”,
active: true,
submenus: [
{
link: “#”,
title: “Submenu 1”,
},
{
link: “#”,
title: “Submenu 2”,
active: true
},
{
link: “#”,
title: “Submenu 3”,
},
]
}
}
}
}
}
</script>

<style scoped>

</style>

The goal is to click on one of the and show the menu contents while at the same time collapse the other components.

I thought about using an array of variables and bind it to the “show” prop and with an event listen to it and set every variable to false except the one form the component that sent the event.

How can I know wich component sent the event?

Any better idea on how to acomplish this task?

Solution :

I think, the best way to do it is to add a uniuque identifier property to each NavBarItem and a property for a selected NavBarItem. Then in the main component you can on click on NavBarItem set selected NavBarItem and in NavBarItem make the isOpen computed on the basis if current NavBarItem identifier equals the clicked NavBarItem. Something like this:

<template>
<aside class=”main-sidebar”>
<section class=”sidebar”>
<ul class=”sidebar-menu” data-widget=”tree”>
<nav-bar-user-profile-item></nav-bar-user-profile-item>
<nav-bar-item item-id=”1” :selected-item-id=”selectedNavbarItemId” @click=”selectedNavBarItemId = 1”></nav-bar-item>
<nav-bar-item item-id=”2” :selected-item-id=”selectedNavbarItemId” @click=”selectedNavBarItemId = 2”></nav-bar-item>
</ul>
</section>
</aside>
</template>

<script>
import NavBarUserProfileItem from ‘@/components/NavBar/NavBarUserProfileItem’;
import NavBarItem from ‘@/components/NavBar/NavBarItem’;

export default {
name: ‘NavBar’,
components: {
NavBarUserProfileItem,
NavBarItem
},
data: function(){
return {
selectedNavBarItemId: 0
}
},
methods: {
MenuHasBeenToggled(event) {
console.log(event);
}
}
}

And in NavBarItem

<template>
<li class=”treeview2 item” :class=”{‘menu-open’: isOpen, ‘active’: menu.active}” @click=”ToggleState”>
<a href=”#”>
<i class=”fa fa-th”></i>
<span>{ menu.title }</span>
<span class=”pull-right-container”>
<i class=”fa fa-angle-right pull-right”></i>
</span>
</a>
<collapse-transition>
<ul class=”treeview-menu” v-show=”isOpen”>
<li v-for=”submenu in menu.submenus” :key=”submenu.title” :class=”{‘active’: ((‘active’ in submenu) ? submenu.active : false)}”>
<b-link :href=”submenu.link”>
<i class=”fa fa-circle-thin”></i>
{ submenu.title }
</b-link>
</li>
</ul>
</collapse-transition>
</li>
</template>

<script>

export default {
name: ‘NavBarItem’,
data: function () {
return {

}
},
computed: {
isOpen:function(){
return itemId == selectedItemId;
}
},
methods: {

},
props: {
itemId:Number,
selectedItemId:Number,
menu: {
type: Object,
default: function() {
return {
link: “#”,
title: “Main menu”,
active: true,
submenus: [
{
link: “#”,
title: “Submenu 1”,
},
{
link: “#”,
title: “Submenu 2”,
active: true
},
{
link: “#”,
title: “Submenu 3”,
},
]
}
}
}
}
}
</script>

<style scoped>

</style>