Vue.js 2 Web Development Projects

Dynamic component

Now, it is time to put all of these into our overlay component and use the activeOverlay property we defined earlier.

1. Add the components and display them with the corresponding value of activeOverlay in the main template:

      <overlay v-if="activeOverlay">        <overlay-content-player-turn          v-if="activeOverlay === 'player-turn'" />        <overlay-content-last-play          v-else-if="activeOverlay === 'last-play'" />        <overlay-content-game-over          v-else-if="activeOverlay === 'game-over'" />      </overlay>

We will remove the overlay completely if the activeOverlay property is equal to null.

Before adding the props, we will need to modify the app state in the state.js file with a few getters.

2. The first one will return the player object from the currentPlayerIndex ...