第一次尝试后，条形图不会随着健康分数更新，但如果您继续点击攻击，游戏最终会结束。我在控制台上收到此错误，但不知道如何解决该问题。任何帮助，将不胜感激。
[Vue 警告]:事件“click”的处理程序无效:未定义
(在 <Root> 中找到)
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(){
this.monsterHealth -= this.calculateDamage(3,10)
if(this.checkWin()){
return;
}
this.monsterAttacks();
},
specialAttack: function(){
this.monsterHealth -= this.calculateDamage(10,20)
if(this.checkWin()){
return;
}
this.monsterAttacks();
},
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 false;
},
monsterAttacks: function(){
this.playerHealth -= this.calculateDamage(5,12);
this.checkWin();
}
}
});.text-center {
text-align: center;
}
.healthbar {
width: 80%;
height: 40px;
background-color: #eee;
margin: auto;
transition: width 500ms;
}
.controls, .log {
margin-top: 30px;
text-align: center;
padding: 10px;
border: 1px solid #ccc;
box-shadow: 0px 3px 6px #ccc;
}
.turn {
margin-top: 20px;
margin-bottom: 20px;
font-weight: bold;
font-size: 22px;
}
.log ul {
list-style: none;
font-weight: bold;
text-transform: uppercase;
}
.log ul li {
margin: 5px;
}
.log ul .player-turn {
color: blue;
background-color: #e4e8ff;
}
.log ul .monster-turn {
color: red;
background-color: #ffc0c1;
}
button {
font-size: 20px;
background-color: #eee;
padding: 12px;
box-shadow: 0 1px 1px black;
margin: 10px;
}
#start-game {
background-color: #aaffb0;
}
#start-game:hover {
background-color: #76ff7e;
}
#attack {
background-color: #ff7367;
}
#attack:hover {
background-color: #ff3f43;
}
#special-attack {
background-color: #ffaf4f;
}
#special-attack:hover {
background-color: #ff9a2b;
}
#heal {
background-color: #aaffb0;
}
#heal:hover {
background-color: #76ff7e;
}
#give-up {
background-color: #ffffff;
}
#give-up:hover {
background-color: #c7c7c7;
}<!DOCTYPE html>
<html>
<head>
<title>Monster Slayer</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="foundation.min.css">
<link rel="stylesheet" href="app.css">
</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">
<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" v-on: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">
<div class="small-12 columns">
<ul>
<li>
</li>
</ul>
</div>
</section>
</div>
<script src="work.js"></script>
</body>
</html>最佳答案
绑定(bind)到点击处理程序的方法是 giveUp()，而在您的方法中，它拼写为 giveUP()。差异可能会引发警告。
关于html - Vue.js 的新手需要帮助了解为什么条形图不会在第一个命令之后更新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59168007/