YanivGameInputForm.vue

<template>
  <table>
    <tr>
      <th></th>
      <th v-for="(playerNumber, index) in numberOfPlayers" :key="index">
        <input 
          size="2" type="text"
          v-model="players[index].name"
          @input="playerInput(index)"
        >
      </th>
    </tr>

    <tr v-for="(roundNo, rIndex) in numberOfRounds" :key="rIndex">
      <td class="roundNo" style="padding-right: 10px">
        <strong>{{ roundNo }}</strong>
      </td>
      <td v-for="(player, pIndex) in players" :key="pIndex" align="center">
        <input
          v-if="pIndex < 2 || player.name !== '' || player.rounds.length !== 0"
          size="1" type="text"
          v-model="player.rounds[rIndex]"
          @input="roundInput(roundNo)"
          :disabled="playersOut[pIndex] ? playersOut[pIndex] < roundNo : false"
        >
      </td>
    </tr>
  </table>
</template>

<script>
export default {
  data: () => ({
    numberOfRounds: 2,
    numberOfPlayers: 2,
    players: [
      {
        name: '',
        rounds: []
      },
      {
        name: '',
        rounds: []
      }
    ]
  }),
  methods: {
    roundInput (roundNumber) {
      if (roundNumber === this.numberOfRounds && !this.gameOver) {
        this.numberOfRounds += 1
      }
    },
    playerInput (playerIndex) {
      if (playerIndex === this.numberOfPlayers - 1) {
        this.numberOfPlayers += 1
        this.players.push({ 
          name: '',
          rounds: []
        })
      }
    }
  },
  computed: {
    playersOut () {
      return this.players.reduce((out, player, index) => {
        let playerOut = player.rounds.filter((val) => val.toLowerCase() === 'x')
        
        if (playerOut.length > 1) {
          console.log('weird')
        } else if (playerOut.length === 1) {
          out[index] = player.rounds.indexOf(playerOut[0]) + 1
          return out
        }

        return out
      }, {})
    },
    gameOver () {
      let out = Object.keys(this.playersOut).length
      return out !== 0 && (out === this.players.filter(p => p.name !== '').length - 1)
    }
  }
}
</script>

<style>
input {
  text-align: center;
}
</style>