Learn TypeScript 3 by Building Web Applications

Creating and using the lyrics view

We have almost reached our goal. Let's now create the lyrics view:

1. Create a Lyrics.vue file under src/views with the following template:

<template>
  <el-container class="lf-lyrics-view" direction="vertical">
    <span>{{song.name}}</span>
    <el-divider></el-divider>

    <el-container class="lf-lyrics-view-lyrics"         direction="vertical">
      <span v-for="lyricsLine in songLyricsLines">
        <span>{{lyricsLine}}<br /><br /></span>
      </span>
    </el-container>
    <router-link to="/"><i class="el-icon-back"></i></router-link>

    <el-divider></el-divider>
    <span>{{songLyrics.copyright}}</span>
  </el-container>
</template>

Here, we simply display the song lyrics and their copyright.

For the lyrics, we display them one line at a time using the ...