Question

[Vue警告]：属性或方法“ StartGame”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保在data选项中或对于基于类的组件，此属性都是反应性的。参见：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;
        },  
    }
})

Answer 1

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


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

要使其他方法起作用-将它们添加到methods对象;-)

Answer 2

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

JRE System Library [JavaSE-11]

然后在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; } } })标记之前包含该javascript文件。例如

</body>

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

2 个答案: