<div id="app">
<table v-if="movies.length">
<thead>
<tr>
<th>Title</th>
<th>Year</th>
<th>URL</th>
</tr>
</thead>
<tbody>
<tr v-for="movie in movies">
<td>{{movie.Title}}</td>
<td>{{movie.Year}}</td>
<td><a :href="movie.Url" target="_blank">{{movie.Url}}</a></td>
</tr>
</tbody>
</table>
<table v-if="shows.length">
<thead>
<tr>
<th>Title</th>
<th>Last watched season</th>
<th>URL</th>
</tr>
</thead>
<tbody>
<tr v-for="show in shows">
<td>{{show.Title}}</td>
<td>{{show["Last watched season"]}}</td>
<td><a :href="show.Url" target="_blank">{{show.Url}}</a></td>
</tr>
</tbody>
</table>
</div>* {
font-family: sans-serif;
}
table {
border: 1px solid black;
border-collapse: collapse;
table-layout: fixed;
margin-bottom: 40px;
width: 100%;
text-align: center;
}
th {
background-color: lightgray;
border: 1px solid black;
padding: 5px;
}
td {
border: 1px solid black;
}
const moviesUrl =
"https://docs.google.com/spreadsheets/d/e/2PACX-1vTtKbv_S8Fdo3HLhm64Tc94WZ6FuqtzqePIjuejNFJxKkUvAE8JF8V2KgKoz1n5jQUDfL8A3F-QoDWk/pub?gid=0&single=true&output=csv";
const showsUrl =
"https://docs.google.com/spreadsheets/d/e/2PACX-1vTtKbv_S8Fdo3HLhm64Tc94WZ6FuqtzqePIjuejNFJxKkUvAE8JF8V2KgKoz1n5jQUDfL8A3F-QoDWk/pub?gid=1364847678&single=true&output=csv";
const app = new Vue({
el: "#app",
data: function () {
return {
movies: [],
shows: []
};
},
created: function () {
this.fetchMovies();
this.fetchShows();
},
methods: {
fetchMovies() {
Papa.parse(moviesUrl, {
download: true,
header: true,
complete: (results) => this.movies = results.data
});
},
fetchShows() {
const _this = this;
Papa.parse(showsUrl, {
download: true,
header: true,
complete: function(results) { _this.shows = results.data; }
});
}
}
});
External CSS
This Pen doesn't use any external CSS resources.