48 lines
1022 B
Vue
48 lines
1022 B
Vue
<template>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Title</th>
|
|
<th>Channel</th>
|
|
<th>Seconds</th>
|
|
<th>Tags</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-cloak v-for="video in Videos" :key=video.ID class="Grid_Small_Text">
|
|
<td>{{video.ID}}</td>
|
|
<td>{{video.Title}}</td>
|
|
<td>{{video.Channel}}</td>
|
|
<td>{{video.Seconds}}</td>
|
|
<td>{{video.Tags}}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import Vue from "vue";
|
|
import * as Dyt from "../dumbyt";
|
|
|
|
// Vue class for keeping state of the videos.
|
|
export default Vue.extend({
|
|
data() {
|
|
return {
|
|
Videos: Array<Dyt.Video>()
|
|
}
|
|
},
|
|
|
|
mounted (){
|
|
Dyt.search_videos("").then(v => this.Videos = v);
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.Grid_Small_Text {
|
|
font-size: 0.7em;
|
|
}
|
|
</style>
|
|
|