[Vuejs]-[Vue warn]: Property or method "StartGame" is not defined on the instance but referenced during render

by

0👍

✅

Create a javascript file. for example game.js . move the code to that file.. 

 new Vue({
    el:"#app",
    data:{
        playerHealth: 100,
        monsterHealth: 100,
        gameIsRunning:false,
    },
    methods:{
        StartGame: function(){
            this.gameIsRunning  = true;
            this.playerHealth = 100;
            this.monsterHealth = 100;
        },
        attack: function(){
            // var max = 10;
            // var min = 3;
            // var damage = this.calculateDamage(3,10);
            this.monsterHealth -= this.calculateDamage(3,10);;

            if(this.checkWin()){
                return;
            }

            // if(this.monsterHealth <= 0){
            //     alert("we won");
            //     this.gameIsRunning = false;
            //     return;
            // }

            // max = 12;
            // min = 5;
            // damage = this.calculateDamage(5,12);
            this.playerHealth -= this.calculateDamage(5,12);;

            // if(this.playerHealth <= 0){
            //     alert("we lost");
            //     this.gameIsRunning = false;
            //     return;
            // }

            this.checkWin();
        },
        specialAttack:function(){
            this.monsterHealth -= this.calculateDamage(10,10);;
            if(this.checkWin()){
                return;
            }
            this.playerHealth -= this.calculateDamage(5,12);;
            this.checkWin();
        },
        heal: function(){

        },
        giveUp: function(){

        },
        calculateDamage: function(min, max){
            return Math.max(Math.floor(Math.random() * max) + 1, min);
        },
        checkWin: function(){
            if(this.monsterHealth <= 0){
                if(confirm("You won! New Game?")){
                    this.StartGame();
                }else{
                    this.gameIsRunning = false;
                }
                return true;
            }
            else if(this.playerHealth <= 0){
                if(confirm("You lost! New Game?")){
                    this.StartGame();
                }else{
                    this.gameIsRunning = false;
                }
                return true;
            }
            return;
        }
    }
})

Then include that javascript file before </body> tag. for example 

<script src="app.js"></script>
<script src="https://YOURDOMAIN.COM/game.js"></script> 
</body> 
</html>

0👍

Your data must be a function that returns object:


data() {
  return {
    playerHealth: 10,
    monsterHealth: 10,
    gameIsRunning:false,
  }
},

For the other methods to work – add them to methods object 😉

Leave a comment