Cannot reset a property in certain conditions, vue.js

Question

So, I have a 'mini-game' in Vue.js which let's you 'fight'. I am trying to make it that after someone 'dies' the game declares the winner and then asks if you want to play again. All good until there,but when i'm trying to make it so after you clicked that you want to play again, to reset your health and 'monster\'s' health back to 100, it just doesn't work. Here's my code, where i reset everything, it runs, i've put console logs but it does nothing:

checkWinner: function() {
    if(this.mHp <= 0) {
        if (confirm('You won! Play again?')) {
            this.startGame();
        } else {
            this.gameIsActive = false;
        }
        return true;
    } else if (this.pHp <= 0) {
        if (confirm('You lost! Play again?')) {
            this.startGame();
        } else {
            this.gameIsActive = false;
        }
        return true;
    }
    return false;
}

} Also, here's the full code if you wanna take a look. I'd be thankful if someone could explain to me why it doesn't work. Thanks in advance !

http://jsfiddle.net/y5mn61qf/

Answer 1

The issue is in your startGame() function, where your pHp and mHp variables are not being set with this.

You have:

pHp = 100;
mHp = 100;

Which should be:

this.pHp = 100;
this.mHp = 100;

I found this by using console.log() which helped me to determine that startGame() was firing, and then upon closer inspection led me to notice that your data was not being updated properly.

Answer 2

In your startGame method you are setting the properties to a new value but forgot this. for the livespan values (pHp, mHp)

Answer 3

I think it should work after adding 'this' before your hp parameters.

    startGame: function() {
        this.gameIsActive = true;
        this.pHp = 100;
        this.mHp = 100;
    },