Vue.js 3按钮在第一次点击后不起作用答案

【问题标题】：Vue.js 3 button not working after first clickVue.js 3按钮在第一次点击后不起作用
【发布时间】：2021-03-13 17:55:13
【问题描述】：

其他按钮工作正常，但只有投降按钮不工作。当我第一次按下投降时它可以工作，但是如果我开始一个新游戏并再次按下投降，它就不再有反应了。我已经尝试在投降（）方法中添加计数器，但仍然无法正常工作。

function getrandomValue(max, min) {
  return Math.floor(Math.random() * (max - min)) + min
}

const app = Vue.createApp({
  data() {
    return {
      myhealth: 100,
      mobhealth: 100,
      rounds: 0,
      winner: null,
    };
  },

  watch: {
    myhealth(value) {
      if (value <= 0 && this.mobhealth <= 0) {
        this.winner = "Its a Draw"
      } else if (value <= 0) {
        this.winner = "You Lost"
      }
    },

    mobhealth(value) {
      if (value <= 0 && this.myhealth <= 0) {
        this.winner = "Its a Draw"
      } else if (value <= 0) {
        this.winner = "You Won"
      }
    }
  },
  computed: {
    playerBarStyle() {
      if (this.myhealth <= 0) {
        return {
          width: "0%"
        }
      } else {
        return {
          width: this.myhealth + '%'
        }
      }
    },

    monsterBarStyle() {
      if (this.mobhealth <= 0) {
        return {
          width: "0%"
        }
      } else {
        return {
          width: this.mobhealth + '%'
        }
      }
    },

    useSP() {
      return this.rounds % 3 !== 0
    }
  },
  methods: {
    newGame() {
      this.myhealth = 100
      this.mobhealth = 100
      this.surrender = false
      this.rounds = 0;
      this.winner = null
      this.surcounter = 0
    },

    attMob() {
      const attValue = getrandomValue(12, 5);
      this.mobhealth = this.mobhealth - attValue;
      this.attPlayer();
      this.rounds++
    },

    specialAttack() {
      const attValue = getrandomValue(18, 10);
      this.mobhealth = this.mobhealth - attValue;
      this.attPlayer();
      this.rounds++
    },

    attPlayer() {
      const attValue = getrandomValue(15, 8)
      this.myhealth = this.myhealth - attValue
    },

    heal() {
      const healValue = getrandomValue(25, 10)
      this.attPlayer();
      if ((this.myhealth + healValue) >= 100) {
        this.myhealth = 100;
      } else {
        this.myhealth = this.myhealth + healValue
      }

      this.rounds++
    },
    surrender() {
      this.winner = 'You Lost'
    }
  }
});

app.mount('#game')

<link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap" rel="stylesheet" />
<script src="https://unpkg.com/vue@next"></script>

<header>
  <h1>Monster Slayer</h1>
</header>
<div id="game">
  <section id="monster" class="container">
    <h2>Monster Health</h2>
    <div class="healthbar">
      <div class="healthbar__value" :style="monsterBarStyle"></div>
    </div>
  </section>
  <section id="player" class="container">
    <h2>Your Health</h2>
    <div class="healthbar">
      <div class="healthbar__value" :style="playerBarStyle"></div>
    </div>
  </section>
  <section class="container" v-if='winner'>
    <h2>Game Over</h2>
    <h3>{{winner}}</h3>
    <button @click='newGame'>New Game</button>
  </section>
  <section id="controls" v-if='!winner'>
    <button @click='attMob'>ATTACK</button>
    <button @click='specialAttack' :disabled="useSP"> SPECIAL ATTACK</button>
    <button @click='heal'>HEAL</button>
    <button @click='surrender'>SURRENDER</button>
  </section>
  <section id="log" class="container">
    <h2>Battle Log</h2>
    <ul></ul>
  </section>
</div>

【问题讨论】：

标签： vue.js

【解决方案1】：

这是因为您将 surrender 方法重新分配给 false 中的 newGame。如果您删除该行，它会起作用：

function getrandomValue(max, min) {
  return Math.floor(Math.random() * (max - min)) + min
}

const app = Vue.createApp({
  data() {
    return {
      myhealth: 100,
      mobhealth: 100,
      rounds: 0,
      winner: null,
    };
  },

  watch: {
    myhealth(value) {
      if (value <= 0 && this.mobhealth <= 0) {
        this.winner = "Its a Draw"
      } else if (value <= 0) {
        this.winner = "You Lost"
      }
    },

    mobhealth(value) {
      if (value <= 0 && this.myhealth <= 0) {
        this.winner = "Its a Draw"
      } else if (value <= 0) {
        this.winner = "You Won"
      }
    }
  },
  computed: {
    playerBarStyle() {
      if (this.myhealth <= 0) {
        return {
          width: "0%"
        }
      } else {
        return {
          width: this.myhealth + '%'
        }
      }
    },

    monsterBarStyle() {
      if (this.mobhealth <= 0) {
        return {
          width: "0%"
        }
      } else {
        return {
          width: this.mobhealth + '%'
        }
      }
    },

    useSP() {
      return this.rounds % 3 !== 0
    }
  },
  methods: {
    newGame() {
      this.myhealth = 100
      this.mobhealth = 100
      this.rounds = 0;
      this.winner = null
      this.surcounter = 0
    },

    attMob() {
      const attValue = getrandomValue(12, 5);
      this.mobhealth = this.mobhealth - attValue;
      this.attPlayer();
      this.rounds++
    },

    specialAttack() {
      const attValue = getrandomValue(18, 10);
      this.mobhealth = this.mobhealth - attValue;
      this.attPlayer();
      this.rounds++
    },

    attPlayer() {
      const attValue = getrandomValue(15, 8)
      this.myhealth = this.myhealth - attValue
    },

    heal() {
      const healValue = getrandomValue(25, 10)
      this.attPlayer();
      if ((this.myhealth + healValue) >= 100) {
        this.myhealth = 100;
      } else {
        this.myhealth = this.myhealth + healValue
      }

      this.rounds++
    },
    surrender() {
      this.winner = 'You Lost'
    }
  }
});

app.mount('#game')

<link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap" rel="stylesheet" />
<script src="https://unpkg.com/vue@next"></script>

<header>
  <h1>Monster Slayer</h1>
</header>
<div id="game">
  <section id="monster" class="container">
    <h2>Monster Health</h2>
    <div class="healthbar">
      <div class="healthbar__value" :style="monsterBarStyle"></div>
    </div>
  </section>
  <section id="player" class="container">
    <h2>Your Health</h2>
    <div class="healthbar">
      <div class="healthbar__value" :style="playerBarStyle"></div>
    </div>
  </section>
  <section class="container" v-if='winner'>
    <h2>Game Over</h2>
    <h3>{{winner}}</h3>
    <button @click='newGame'>New Game</button>
  </section>
  <section id="controls" v-if='!winner'>
    <button @click='attMob'>ATTACK</button>
    <button @click='specialAttack' :disabled="useSP"> SPECIAL ATTACK</button>
    <button @click='heal'>HEAL</button>
    <button @click='surrender'>SURRENDER</button>
  </section>
  <section id="log" class="container">
    <h2>Battle Log</h2>
    <ul></ul>
  </section>
</div>

【讨论】：