Cannot read property '$on' of undefined

I’m having a hard time catching tree events. I followed your docs (https://amsik.github.io/liquor-tree/#Events) but somehow didn’t work for me and returned an error that says “Cannot read property ‘$on’ of undefined” at this line:

this.$refs.tree.$on(e.name, this.someMethod(e))

Really appreciate your help. 😃

[become-iron]

@breekoy Or you could just create the tree only after obtaining of data:

<tree v-if="data.length" :data="tree_data" @node:selected="handleNodeSelect"></tree>

[breekoy]

the problem is that the mounted function is invoked before the tree loaded

I guess in the vue, the tree is load in aync way, not sync !

Yes, this is what apparently is happening. In my case, I have 300+ objects coming from an API to be loaded to the tree component. I had the API call on the created() hook thinking that it would be fine. However, when the mounted() hook is invoked, tree is still loading. My guesses would be the API didn’t respond yet when mounted() is invoked or the objects to be loaded are huge enough to cause delay in mounting/loading the tree component.

I somehow made this work by creating an async method that calls the API and call that method inside the mounted() hook with .then() chained into it. Inside the function parameter of then(), I called the this.$refs.tree.setModel() and this.$refs.tree.$on().

Like this:

<tree id="tree" ref="tree" :data="tree_data"></tree>

<script>
    import Tree from 'liquor-tree'

    export default {
        components: { Tree },
        data () {
            return { tree_data: [] }
        },
        methods: {
            async getObjectsFromApi () {
                let response = await someApiCallMethod()
                return response.data
            }
        },
        mounted () {
            this.getObjectsFromApi().then(tree_data => {
                  this.tree_data = tree_data
                  this.$refs.tree.setModel(this.tree_data)
                  this.$refs.tree.$on('node:selected', event => {
                      //some code here to handle the event...
                  })
            })
        },
        beforeDestroy () {
            //making sure tree_data is empty before leaving the page
            this.tree_data = []
            this.$refs.tree.setModel(this.tree_data)
        }
    }
</script>

sorry for a very late response, been kinda busy lately.