registerPlayers.vue

<template>
  <div id="register-players">
    <h2>Tournament: {{ tournamentName }}</h2>
    <div id="add-players" v-if="!playersRegistered">
      <input type="text" v-model="playerName" />
      <button type="button" @click="addPlayer">Add player</button>
      <div id="temporary-player-list">
        <ul>
          <li v-for="player in temporaryPlayerList">{{ player }}</li>
        </ul>
      </div> 
    </div> 
    <div v-if="playersRegistered">
      <h4>Final List of Participants:</h4>
      <ul >
        <li v-for="player in registeredPlayerList">{{ player.name }}</li>
      </ul>
    </div>
    <button type="button" @click="registerPlayers" v-if="!playersRegistered">Finalize Player Registrations</button>
    <button @click="runTest">TEsting</button>
  </div>
</template>

<script>

export default {
  name: 'registerPlayers',
  data: function(){
    return {
      playerName: "",
    }
  },

  computed: {
    temporaryPlayerList: function(){
      return this.$store.state.temporaryPlayerList;
    },
    tournamentName: function(){
      return this.$store.state.currentTournament.name;
    },
    registeredPlayerList: function(){
      return this.$store.state.registeredPlayerList
    },
    playersRegistered: function(){
      return this.$store.state.playersRegistered
    }
  },
  methods: {
    addPlayer: function(){
      this.$store.commit('addPlayer', this.playerName);
      this.playerName = "";
    },
    registerPlayers: function(){
      console.log(this.playersRegistered);
      this.$store.dispatch('registerPlayers');
    },
    runTest: function(){
      this.$store.dispatch('runTest');
    }
  }
  
} 
</script>