HTML+Vue开发井字棋游戏restart重启按钮点击无响应问题求助

失效原因 #

• this指向错误：你定义在head中的全局restart函数的this默认指向window对象，无法访问到Vue实例内部存储的game状态数据
• 响应式更新规则不匹配：Vue2无法检测到直接通过数组下标修改值的操作，就算数据改了页面也不会刷新
• 重置值不符合业务逻辑：你代码里重置给格子赋值的是空格' '，而初始状态是空字符串''，空格属于真值，会被模板的v-if="col"判定为有内容，导致格子无法正确清空

推荐修复方案（符合Vue开发规范） #

1. 删掉head里定义的全局restart函数，将重置逻辑加到Vue实例的methods配置中，同时记得重置回合状态：

var app = new Vue({
  el: '#app',
  data: {
    turn: 'O',
    game: [
      ['', '', ''],
      ['', '', ''],
      ['', '', '']
    ]
  },
  methods: {
    // 新增restart方法
    restart() {
      // 直接替换整个数组，触发Vue响应式更新
      this.game = [
        ['', '', ''],
        ['', '', ''],
        ['', '', '']
      ]
      // 重置为先手O
      this.turn = 'O'
    },
    // 保留原有click、calcResult方法不变
    click(row, col) {
      // ...原有逻辑
    },
    calcResult() {
      // ...原有逻辑
    }
  }
})

2. 将重置按钮移入id="app"的Vue容器内部，改用Vue的事件绑定语法：

<div id="app" v-cloak>
  <p>Current Player: <i :class="turn == 'O' ? 'far fa-circle' : 'fas fa-times'"></i></p>
  <table>
    <!-- 原有表格渲染逻辑不变 -->
  </table>
  <!-- 把按钮移进来，替换onclick为@click -->
  <input type="button" @click="restart" value="Restart">
</div>

快速修复方案（不调整原有代码结构） #

如果你不想修改按钮位置和代码结构，直接修改head中的restart函数，手动调用全局Vue实例即可：

function restart() {
  // 直接操作全局声明的Vue实例app
  app.game = [
    ['', '', ''],
    ['', '', ''],
    ['', '', '']
  ]
  app.turn = 'O'
}

内容的提问来源于stack exchange，提问作者Jack Ng