не срабатывает $emit из дочернего компонента в родительский
TreeViewItemUsers.vue
<template>
<div :class="{'tree-view__root': isRoot, 'tree-view__node': isNode}">
<template v-if="isRoot">
<div is="tree-view-item-users"
v-for="node in nodes"
:key="node.uuid"
:node="node"
></div>
</template>
<template v-else-if="isNode">
<div class="node-name">
<i v-if="childrenExists"
class="fas"
:class="{
'fa-plus': isOpen && !isLoading,
'fa-minus': !isOpen || isLoading
}"
:title="(isOpen ? 'Скрыть' : 'Показать') + ' вложенный список'"
></i>
<span class="label-name" v-on:click="selectNode()"
:class="{'tree-view__bold': isSelected}"
>
{{ node.name }}
</span>
<i v-if="isLoading" class="fa fa-spinner fa-pulse fa-fw"> </i>
</div>
<div v-show="isOpen" v-if="hasChildren" class="nodes-child">
<tree-view-item-users v-for="child in node.users"
:key="child.uuid"
:node="child"
ref="users"
@selected-node="$emit('selected-node', $event)"
></tree-view-item-users>
</div>
</template>
</div>
</template>
<script>
export default {
name: 'tree-view-item-users',
props: {
node: {
type: Object,
},
nodes: {
type: Array,
default: null
},
},
data() {
return {
showChildren: true,
isOpen: true,
isLoading: false,
}
},
computed: {
isRoot () {
return typeof this.nodes == 'object' && this.nodes !== null;
},
isNode () {
return Boolean(!this.isRoot && typeof this.node == 'object' && this.node);
},
isSelected () {
return this.isNode && this.value === this.node.uuid;
},
childrenExists () {
if (!this.node) {
return false;
}
if (this.canLoadChildren) {
return true;
}
return this.hasChildren;
},
hasChildren () {
return Boolean(
this.node
&& Array.isArray(this.node.users)
&& this.node.users.length > 0
);
},
canLoadChildren () {
return Boolean(
this.node
&& Number.isInteger(this.node.users) && this.node.users > 0
);
},
},
methods: {
selectNode () {
console.log(this.node.uuid);
this.$emit('selected-node', this.node.uuid);
}
}
}
</script>
Tree.vue
<template>
<div>
<tree-view-item-users :nodes="usersGroups"
:users="users"
@selected-node="selectTreeItemHandler">
</tree-view-item-users>
</div>
</template>
<script>
import TreeViewItemUsers from "./TreeViewItemUsers";
export default {
name: 'Tree',
props: [
'users',
'usersGroups',
],
components:{
TreeViewItemUsers
},
methods: {
selectUser(uuid){
this.$emit('select-user', uuid);
this.selectedUserUuid = uuid;
},
selectTreeItemHandler(uuid) {
console.log('Item selected');
this.$emit('select-user', uuid);
}
}
}
</script>
Users.vue
<template>
<div>
<Tree :users="users"
:nodes="usersGroups"
:usersGroups="usersGroups"
@select-user="onSelectUser"/>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import Tree from '@/components/Tree.vue';
export default {
name: 'Users',
methods: {
onSelectUser(uuid) {
this.currentPropertyComponent = UserProperty;
this.$store.dispatch('fetchUser', uuid);
this.selectedObject = 'user';
}
},
computed: {
...mapGetters([
'users',
'usersLoading',
'user',
'userLoading',
'usersGroups',
'usersGroupsLoading'
])
},
mounted(){
this.$store.dispatch('fetchUsers');
this.$store.dispatch('fetchUsersGroups');
}
}
</script>