[Vue warn]: Property or method “StartGame” is not defined on the instance but referenced during render

0
votes

[Vue warn]: Property or method "StartGame" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

enter image description here

This is the code from jsfiddle: html

<!DOCTYPE html>
<html>
<head>
    <title>Monster Slayer</title>
    <script src="https://npmcdn.com/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="css_project1/">
    <link rel="stylesheet" href="css_project1//app.css">
    <script src="https://unpkg.com/vue@2.6.9/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <section class="row">
        <div class="small-6 columns">
            <h1 class="text-center">YOU</h1>
            <div class="healthbar">
                <div class="healthbar text-center" 
                style="background-color: green; margin: 0; color: white;"
                :style="{width:playerHealth + '%'}">
                    {{ playerHealth }}
                </div>
            </div>
        </div>
        <div class="small-6 columns">
            <h1 class="text-center">MONSTER</h1>
            <div class="healthbar">
                <div class="healthbar text-center" 
                style="background-color: green; margin: 0; color: white;"
                :style="{width:monsterHealth + '%'}">
                        {{ monsterHealth }}
                </div>
            </div>
        </div>
    </section>
    <section class="row controls" v-if="!gameIsRunning">
        <div class="small-12 columns">
            <!-- <input type="text"> -->
            <button id="start-game" @click="StartGame" >START NEW GAME</button>
        </div>
    </section>
    <section class="row controls" v-else>
        <div class="small-12 columns">
            <button id="attack" @click="attack">ATTACK</button>
            <button id="special-attack" @click="specialAttack">SPECIAL ATTACK</button>
            <button id="heal" @click="heal">HEAL</button>
            <button id="give-up" @click="giveUp">GIVE UP</button>
        </div>
    </section>
    <section class="row log" v-if="gameIsRunning">
        <div class="small-12 columns">
            <ul>
                <li>

                </li>
            </ul>
        </div>
    </section>
</div>
<script src="app.js"></script>
</body>
</html>

new Vue({
    el:"#app",
    data: {
      playerHealth: 10,
      monsterHealth: 10,
      gameIsRunning:false,
    },
    methods:{
        StartGame: function(){
            this.gameIsRunning  = true;
            this.playerHealth = 40;
            this.monsterHealth = 40;
        },  
    }
})
2
vue.js
when I called my file externally I am getting this error and when i have written script in .html file before body close it is not showing error. – payal butala
Can you give us some code. Where do you define what StartGame is? – Lassi Uosukainen
StartGame is not being found by the component trying to access it. This issue is because of it please be elaborate so that we can help. – AKASH PANDEY
<div id="app" <section class="row controls" v-if="!gameIsRunning"> <div class="small-12 columns"> <button id="start-game" @click="StartGame" >START NEW GAME</button> </div> </section> </div> <script src="app.js"> new Vue({ el:"#app", data:{ playerHealth: 100, monsterHealth: 100, gameIsRunning:false, }, methods:{ StartGame: function(){ this.gameIsRunning = true; this.playerHealth = 100; this.monsterHealth = 100; }, } }) – payal butala
Please read this and then edit your question, because like this nobody can (or should) help you. stackoverflow.com/help/how-to-ask – Matthias S

2 Answers

0
votes

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
votes

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