You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
34 lines
798 B
JavaScript
34 lines
798 B
JavaScript
3 years ago
|
export default {
|
||
|
|
setup() {
|
||
|
|
const { ref, computed } = Vue;
|
||
|
|
|
||
|
|
const pads = ref([]);
|
||
|
|
|
||
|
|
const columns = ["title", "overview", "categories", "date"];
|
||
|
|
|
||
|
|
fetch("http://localhost:3146/")
|
||
|
|
.then((res) => res.json())
|
||
|
|
.then((data) => (pads.value = data));
|
||
|
|
|
||
|
|
return { pads, columns };
|
||
|
|
},
|
||
|
|
template: `
|
||
|
|
<table>
|
||
|
|
<tr class="header">
|
||
|
|
<th v-for="column in columns">{{column }}</th>
|
||
|
|
</tr>
|
||
|
|
<tr v-for="(pad, index) in pads" key="pad.title, index" :class="pad.category">
|
||
|
|
|
||
|
|
|
||
|
|
<td class="title">
|
||
|
|
<a :href="pad.link" target="_blank"> {{pad.title}} </a>
|
||
|
|
</td>
|
||
|
|
<td class="overview">{{pad.overview}}</td>
|
||
|
|
<td class="categories">{{pad.category}}</td>
|
||
|
|
<td class="date">{{pad.date}}</td>
|
||
|
|
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
`,
|
||
|
|
};
|