I have a problem with my computed property
correctAnswersForCurrentStage(): object {return return this.correctAnswers[this.currentLevel] ?? {}; },
Some background: this.CorrectAnswers is an object where the properties are the levels and the values are the objects for each door:
this.correctAnswers = { "1": { "1": 15, "2": 25, "3": 35, "4": 45 }, "2": { "1": 15, "2": 25, "3": 35, "4": 45 }, }
So when a level is completed, I will add levels
this.currentLevel++
Everything will block after this. I don't know if it's Vue or TypeScript that's causing this problem. Or maybe a combination of the two? Does anyone know why this is happening?
I tried turning off the level increase and then there was no problem. Obviously I've stayed on the same level. But other reset logic works
follow up:
When I changed it so that it didn't need to use an index, I still had the same problem, now I've done it:
correctAnswersForCurrentStage(): object { if (this.currentLevel === 1) { return this.correctAnswersForLevel1; } if (this.currentLevel === 2) { return this.correctAnswersForLevel2; } if (this.currentLevel === 3) { return this.correctAnswersForLevel3; } if (this.currentLevel === 4) { return this.correctAnswersForLevel4; } return {}; },
It's hard to tell with the code currently provided, but I suspect
this.CorrectAnswersForLevel1
etc. are also computed properties. This means you get a circular reference, resulting in an infinite loop.In addition to this, the code also contains incorrect references:
this.CorrectAnswers['1']
differs fromthis.CorrectAnswers[1]
in that it compares strings and numbers to each other.