I am currently working on a game project. The main structure will be done using game objects based on javascript classes with constructors. I have done it in plain Javascript and Html, but when trying to port it to Vue.js I have problems importing and using objects. The import is working fine, the problem is that I have a property this.element = element.config and error says element is not defined (though in simple javascript it is working fine). Hope you can explain some of that stuff and suggest me changes to make it work.

Here is my Javascript class object:

export default class World {
    constructor(config) {
        this.element = element.config
        this.canvas = this.element.getElementById('game__canvas')
        this.ctx = this.canvas.getContext('2d')
    }

    init() {
        console.log('Hi! It is working!', this)
    }
}

Here is the code that tries to launch it in my Vie.js app:

import World from './World' // First I import it like that from an external file

mounted() {
  this.gameUpdate()
},
methods: {
  updateGame() {
    const world = new World({
      element: document.querySelector('#game__container')
    })
    world.init()
  }
},

// gives me Uncaught (in promise) ReferenceError: element is not defined

CodePudding user response：

are you sure is

this.element = element.config

and not

this.element = config.element

?