Не удается сбросить свойство в определенных условиях, vue.js

Question

Итак, у меня есть «мини-игра» в Vue.js, которая позволяет вам «сражаться».Я пытаюсь сделать так, чтобы после того, как кто-то «умирает», игра объявляет победителя, а затем спрашивает, хотите ли вы играть снова.Все хорошо, пока нет, но когда я пытаюсь сделать так, чтобы после того, как вы нажали, что вы хотите играть снова, чтобы восстановить ваше здоровье и здоровье «монстра» обратно к 100, это просто не работает.Вот мой код, где я сбрасываю все, он запускается, я помещаю консольные журналы, но он ничего не делает:

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

} Кроме того, вот полный код, если вы хотите взглянуть.Я был бы благодарен, если бы кто-то мог объяснить мне, почему это не работает.Заранее спасибо!

http://jsfiddle.net/y5mn61qf/

Answer 1

В вашем методе startGame вы устанавливаете свойства на новое значение, но забыли this. для значений livespan (pHp, mHp)

Answer 2

Я думаю, что это должно работать после добавления 'this' перед вашими параметрами hp.

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

Answer 3

Проблема в вашей функции startGame(), где переменные pHp и mHp не устанавливаются с this.

У вас есть:

pHp = 100;
mHp = 100;

Что должно быть:

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

Я обнаружил это с помощью console.log(), который помог мне определить, что startGame() запускается, а затем при ближайшем рассмотрении заставил меня заметить, что ваши данные не обновлялись должным образом.