Set Map Layer's DataSource Programmatically

[Max]

I have a Kendo Vue Map with two layers: 1) a tile layer using OSM and 2) a bubble layer with a dataSource pointed to an api endpoint.  When I try to set the bubble layer's dataSource property to a component data property (this.mapPointDatasource) it does not work (see code below).  What am I missing?

 

...

data () {
      return {
        center: [39.5, -96],
        initialZoom: 4,
        mapPointDatasource: new kendo.data.DataSource({
          transport: {
            read: {
              url: 'http://<myJsonEndPoint>',
              dataType: 'json',
              cache: false
            }
          }
        }),
        layers: [
          {
            type: 'tile',
            urlTemplate: 'http://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png',
            subdomains: ['a', 'b', 'c']
          },
          {
            type: 'bubble',
            //dataSource: this.mapPointDatasource,  // <- DOES NOT WORK
            dataSource: {  // <-- WORKS
              transport: {
                read: {
                  url: 'http://<myJsonEndPoint>,
                  dataType: 'json',
                  cache: false
                }
              }
            }
          }
        ]
      }
    },

...

[Plamen]

Hi,

In cases when object form data needs to be referred in another property is recommended to use computed properties as for example it is explained in this forum thread.

Regards,
Plamen
Progress Telerik