Ein Speicherverlust tritt auf, wenn der Wert geändert wird, der einen Index in einer berechneten Eigenschaft angibt

Question

Ich habe ein Problem mit meiner berechneten Eigenschaft

correctAnswersForCurrentStage(): object {return 
    return this.correctAnswers[this.currentLevel] ?? {};
},

Einige Hintergrundinformationen: this.CorrectAnswers ist ein Objekt, dessen Eigenschaften die Ebenen und die Werte Objekte für jede Tür sind:

this.correctAnswers = {
     "1": {
        "1": 15,
        "2": 25,
        "3": 35,
        "4": 45
    },
    "2": {
        "1": 15,
        "2": 25,
        "3": 35,
        "4": 45
    },
}

Wenn also ein Level abgeschlossen ist, füge ich weitere Level hinzu

this.currentLevel++

Danach wird alles blockiert. Ich weiß nicht, ob Vue oder TypeScript dieses Problem verursacht. Oder vielleicht eine Kombination aus beidem? Weiß jemand, warum das passiert?

Ich habe versucht, die Pegelerhöhung auszuschalten, aber dann gab es kein Problem. Offensichtlich bin ich auf dem gleichen Niveau geblieben. Aber eine andere Reset-Logik funktioniert

Follow-up:

Ich hatte immer noch das gleiche Problem, als ich es so geändert habe, dass kein Index verwendet werden muss. Jetzt habe ich es geschafft:

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 {};
},

Answer 1

很难用当前提供的代码来判断，但我怀疑 this. CorrectAnswersForLevel1 等也是计算属性。这意味着您会得到一个循环引用，从而导致无限循环。

除此之外，代码还包含错误的引用： this. CorrectAnswers['1'] 与 this. CorrectAnswers[1] 不同，因为它会相互比较字符串和数字。