pass an extra id arguments to loadChildrenOptions prop (#59)

docs/components/DelayedLoading.vue

@@ -30,7 +30,7 @@
     }),
 
     methods: {
-      loadChildrenOptions(parent, callback) {
+      loadChildrenOptions(parent, callback/*, id */) {
         // Typically, do the AJAX stuff here.
         // Once the server has responded, call the callback with received data.
         // We just use `setTimeout()` here to simulate an async operation

docs/components/DelayedRootOptions.vue

@@ -11,7 +11,11 @@
 
   export default {
     methods: {
-      loadRootOptions(callback) {
+      loadRootOptions(callback/*, id */) {
+        // If you have multiple instances of vue-treeselect that
+        // shares the same `loadRootOptions` function,
+        // you can use the `id` argument (which is the `id` prop you passed)
+        // to identify the origin.
         if (called) {
           const rootOptions = [ {
             id: 'a',

docs/partials/guides.pug

@@ -51,10 +51,10 @@
 
       1. Declare an *unloaded* branch node by setting `children: null` or `isBranch: true`
       2. Provide a `loadChildrenOptions` prop
-      3. Whenever an unloaded branch node gets expanded, `loadChildrenOptions(parentNode, callback)` will be called within which the job requesting data from remote server could be performed
+      3. Whenever an unloaded branch node gets expanded, `loadChildrenOptions(parentNode, callback, id)` will be called within which you can perform the job requesting data from a remote server
   +demo('DelayedLoading')
   :markdown-it
-    If you want the root level options to be delayed loaded as well, omit the `options` prop and provide an extra `loadRootOptions` prop. By default, vue-treeselect will try loading root options by calling `loadRootOptions(callback)` after the component is mounted. In this example I have disabled that feature, and root options will be loaded when the menu is opened.
+    If you want the root level options to be delayed loaded as well, omit the `options` prop and provide an extra `loadRootOptions` prop. By default, vue-treeselect will try loading root options by calling `loadRootOptions(callback, id)` after the component is mounted. In this example I have disabled that feature, and root options will be loaded when the menu is opened.
   +demo('DelayedRootOptions')
 
 +guide('Flat Mode & Sort Values')

src/mixins/treeselectMixin.js

@@ -1216,7 +1216,7 @@ export default {
 
         parentNode.isPending = true
         parentNode.loadingChildrenError = ''
-        this.loadChildrenOptions(rawData, callback)
+        this.loadChildrenOptions(rawData, callback, this.id)
       }
     },
 

test/unit/specs/Treeselect.spec.js

@@ -3230,6 +3230,7 @@ describe('Props', () => {
       const loadChildrenOptions = jasmine.createSpy('loadChildrenOptions')
       const wrapper = mount(Treeselect, {
         propsData: {
+          id: 'test',
           options: [ {
             id: 'a',
             label: 'a',
@@ -3251,7 +3252,7 @@ describe('Props', () => {
       const { a } = vm.nodeMap
 
       expect(loadChildrenOptions.calls.count()).toBe(1)
-      expect(loadChildrenOptions).toHaveBeenCalledWith(a.raw, jasmine.any(Function))
+      expect(loadChildrenOptions).toHaveBeenCalledWith(a.raw, jasmine.any(Function), 'test')
     })
   })
 
@@ -3840,6 +3841,47 @@ describe('Props', () => {
       jasmine.clock().uninstall()
     })
 
+    it('multiple instances share the same `loadChildrenOptions` function', async () => {
+      const loadChildrenOptions = jasmine.createSpy('loadRootOptions')
+      const { vm: vm1 } = mount(Treeselect, {
+        propsData: {
+          id: 1,
+          loadChildrenOptions,
+          options: [ {
+            id: 'branch',
+            label: 'branch',
+            children: null,
+          } ],
+        },
+        data: {
+          isOpen: true,
+        },
+      })
+      const { vm: vm2 } = mount(Treeselect, {
+        propsData: {
+          id: 2,
+          loadChildrenOptions,
+          options: [ {
+            id: 'branch',
+            label: 'branch',
+            children: null,
+          } ],
+        },
+        data: {
+          isOpen: true,
+        },
+      })
+
+      vm1.toggleExpanded(vm1.nodeMap.branch)
+      await vm1.$nextTick()
+      expect(loadChildrenOptions.calls.argsFor(0)).toEqual([ jasmine.any(Object), jasmine.any(Function), 1 ])
+
+      vm2.toggleExpanded(vm2.nodeMap.branch)
+      await vm2.$nextTick()
+      expect(loadChildrenOptions.calls.argsFor(1)).toEqual([ jasmine.any(Object), jasmine.any(Function), 2 ])
+    })
+
+
     it('should override fallback nodes', async () => {
       jasmine.clock().install()
 
@@ -4084,6 +4126,28 @@ describe('Props', () => {
       expect(loadRootOptions.calls.count()).toBe(1)
     })
 
+    it('multiple instances share the same `loadRootOptions` function', () => {
+      const loadRootOptions = jasmine.createSpy('loadRootOptions')
+      const { vm: vm1 } = mount(Treeselect, {
+        propsData: {
+          id: 1,
+          loadRootOptions,
+        },
+      })
+      const { vm: vm2 } = mount(Treeselect, {
+        propsData: {
+          id: 2,
+          loadRootOptions,
+        },
+      })
+
+      vm1.openMenu()
+      expect(loadRootOptions.calls.argsFor(0)).toEqual([ jasmine.any(Function), 1 ])
+
+      vm2.openMenu()
+      expect(loadRootOptions.calls.argsFor(1)).toEqual([ jasmine.any(Function), 2 ])
+    })
+
     it('should override fallback nodes', () => {
       // the same with `loadChildrenOptions`
     })