ScreenSpaceEventHandler: Uncaught typeError: Cannot read property 'viewer' of undefined using Vue2

Hi all,

I’m constructing a globe with Cesium and using VueJS. One of my components looks as the code below. This component is added to the App.vue. The globe is working perfectly and displaying all the primitives great.

Now I would like to add some Cesium ScreenSpaceEventHandlers to the viewer as you can see in the code however. The screenSpaceEventHandler concerning the LEFT CLICK, is giving me the error below when I click it. The error made me believe that the viewer is nog yet defined, however, this is strange as the viewer is already working, as I can tell by rectangles and rectangleoutlines being drawn with no problem and also using the viewer data by calling his.viewer many times(maybe not visible in the code below).

I hope if someone looks at the code below they can see what I am missing here. I simply call the viewer data by saying “this.viewer…”. however it "cannot read property ‘viewer’ of undefined. The error happens at one of the last lines of the code below: “let pickedFeature = this.viewer.scene.pick(movement.position);”. Clearly I cannot use this.viewer here, I just don’t understand why not, and why it would be undefined? What can I do :slight_smile:

I hope someone can help me out with this. Thank you.

ERROR
Which indicates to me that the viewer is working fine. However I run into the error with the following stack trace:
Uncaught TypeError: Cannot read property ‘viewer’ of undefined
at onLeftClick (Globe.vue?c172:419)
at cancelMouseEvent (ScreenSpaceEventHandler.js?1863:295)
at handleMouseUp (ScreenSpaceEventHandler.js?1863:317)
at handlePointerUp (ScreenSpaceEventHandler.js?1863:867)
at HTMLCanvasElement.listener (ScreenSpaceEventHandler.js?1863:54)

CODE

<template>
  <div id="cesiumContainer"></div>
</template>

import * as Cesium from "cesium";

export default {
  name: "Globe",
  data: function () {
		return {
			viewer : undefined,
			terrainProviderViewModels : [],
			selectedTerrainProviderViewModel : undefined,
			imageryProviderViewModels : [],
			selectedImageryProviderViewModel : undefined,
		}
	},
	mounted: function () {
    window.CESIUM_BASE_URL = "/cesium/"
    this.drawGlobe();
	},
   methods: {
    async drawGlobe() {
      try{
        this.terrainProviderViewModels.push(await this.getTerrainViewModels());
        this.selectedTerrainProviderViewModel = await this.assignTerrainProviderViewModel();
        this.imageryProviderViewModels.push(await this.getImageryModels());
        this.selectedImageryProviderViewModel = await this.assignImageryModels();
        this.viewer = await this.createViewer();
        await this.drawCells();
        
      } catch(e) {
        console.log("Failed to draw globe: " + e);
      }
	},
		async getTerrainViewModels() {
			// some code to get terrain view models
		},
		
        async assignTerrainProviderViewModel() {
			// some code to get terrain provider view models
		},
        async getImageryModels() {
			// some code to get imagery models
		},
        async assignImageryModels() {
			// some code to assign current imagery models
		},
        async createViewer() {
			// creating  a viewer
		},
        async drawCells() {
			await this.createRectangleInstancesAndRectangleOutlineInstances();
			await this.createPrimitives();
			await this.addPrimitivesToViewer();
			await this.addEvents();
		},
		async createRectangleInstancesAndRectangleOutlineInstances() {
			// some code to create rectangleInstances
		}, 
		async createPrimitives() {
			// some code to create primitives
		}, 
		async addPrimitivesToViewer() {
			// some code to add primitives to viewer
		},
		async addEvents() {
			try{
				this.viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
					let pickedFeature = this.viewer.scene.pick(movement.position);
					// .... some more code
				},Cesium.ScreenSpaceEventType.LEFT_CLICK);
			}catch(e) {
				console.log(e);
			}
		}
   }
}

Anyone?