Props in our template

We will now use the props we created in the template of the top-bar component.

1. Change the top-bar template to display the player's name with the players prop:

      template: `<p class="top-bar">
        <p class="player p0">{{ players[0].name }}</p>
        <p class="player p1">{{ players[1].name }}</p>
      </p>`,

As you can see in the preceding code, we are also using the props like we did with properties in templates. You should see the player names displayed in the app.

1. Continue with the turn counter between players using the turn prop:

      template: `<p class="top-bar">
        <p class="player p0">{{ players[0].name }}</p>
        <p class="turn-counter">
        <p class="turn">Turn {{ turn }}</p>
        </p>
        <p class="player p1">{{ players[1].name }}</p>
        </p>`,

In addition to the label, we also want to display a big arrow facing the current player to make it more obvious.

1. Add the arrow image inside the .turn-counter element, and add a dynamic class using the currentPlayerIndex prop with the v-bind shorthand we used in Chapter 2, Markdown Notebook:

      template: `<p class="top-bar" :class="'player-' +         
      currentPlayerIndex">
        <p class="player p0">{{ players[0].name }}</p>
        <p class="turn-counter">
          <img class="arrow" src="svg/turn.svg" />
          <p class="turn">Turn {{ turn }}</p>
        </p>
        <p class="player p1">{{ players[1].name }}</p>
      </p>`,

Now, the app should display the fully featured top bar, with the two players, names and the turn counter between them. You can test the Vue-automated reactivity by typing these commands into the browser console:

state.currentPlayerIndex = 1
state.currentPlayerIndex = 0

You should see the arrow turning around to face the correct player name, which gets emphasized: