Cannot use 'in' operator to search for nodes in null

[JTInfinite]

First off, thanks for the great work with sl-vue-tree. I seem to have my tree displaying properly on the page with the drag and collapse 'branch' functionality working. However, my console gives me a series of warnings whenever I click a node:

1. [Vue Warn] Cannot set reactive property on undefined, null, or primitive value: null
2. [Vue warn]: Error in v-on handler: "TypeError: Cannot use 'in' operator to search for 'chapters' in null"
3. TypeError: Cannot use 'in' operator to search for 'chapters' in null

My chapters array is an array of the following objects - i am simply giving this.chapters to the sl-vue-tree v-model:

 {
                title: this.title,
                data: {
                    image: this.image,
                    description: this.description,
                    id: uuid()
                },
                children: [
                    {
                        data: {
                            id: uuid(),
                            path: '#',
                            colour: 'primary',
                            isCompile: false,
                        },
                        title: 'Notes',
                        isLeaf: true, 
                        isSelected: false,
                        isSelectable: true,
                        isDraggable: true,
                        isExpanded: true
                    }
                ],
                isLeaf: false,
                isSelected: false,
                isSelectable: false,
                isDraggable: true,
                isExpanded: true   
            }

Apologies in advance if I have missed something simply - been scratching my head with this one for a couple of days now.

Thanks!

[holiber]

Can you provide a minimal example that reproduces the issue?

[JTInfinite]

Thanks for the response.

Do you have jsfiddle/codepen boilerplate? Not sure how to get your component into a fiddle.

[holiber]

https://jsfiddle.net/cm3ydg7h/

[JTInfinite]

Thanks for that. First look suggests my use of 'this' in v-model is causing the error. Changing from:

 <sl-vue-tree v-model="this.chapters" 
                ref="tree-view"
                :allowMultiselect="false" 
                @nodeClick="selectScene">...
</sl-vue-tree>

to:

 <sl-vue-tree v-model="chapters" 
                ref="tree-view"
                :allowMultiselect="false" 
                @nodeClick="selectScene">...
<sl-vue-tree>

seems to silence the warnings. A big thank you for helping out and sorting the fiddle template out. Allow me to keep this issue open for a little while longer so I can be sure I have fixed it.

[JTInfinite]

seems to be working now. Just a note to any future reader:

@nodeClick should be @nodeclick

Could punch myself for that one