не срабатывает $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>

Ответы (0 шт):