[Vue 警告]：属性或方法“StartGame”未在实例上定义，但在渲染期间引用答案

【问题标题】：[Vue warn]: Property or method "StartGame" is not defined on the instance but referenced during render[Vue 警告]：属性或方法“StartGame”未在实例上定义，但在渲染期间引用
【发布时间】：2019-08-12 07:37:48
【问题描述】：

[Vue 警告]：属性或方法“StartGame”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。请参阅：https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。

enter image description here

这是来自 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;
        },  
    }
})

【问题讨论】：

当我在外部调用我的文件时出现此错误，当我在正文关闭之前在 .html 文件中编写脚本时，它没有显示错误。
你能给我们一些代码吗？您在哪里定义 StartGame 是什么？
StartGame 没有被试图访问它的组件找到。这个问题是因为它，请详细说明，以便我们可以提供帮助。
请阅读此内容然后编辑您的问题，因为这样没有人可以（或应该）帮助您。 stackoverflow.com/help/how-to-ask

标签： vue.js

【解决方案1】：

你的数据必须是一个返回对象的函数：


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

为了让其他方法起作用 - 将它们添加到 methods 对象 ;-)

【讨论】：

【解决方案2】：

创建一个 javascript 文件。例如 game.js 。将代码移至该文件..

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

然后在</body> 标记之前包含该javascript 文件。例如

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

【讨论】：