chew/pages/index.vue
2022-02-14 13:06:33 +01:00

63 lines
No EOL
2.1 KiB
Vue

<template>
<section>
<section>
<!-- <v-btn-toggle
v-model="selectedCohorts"
dense
tile
color="deep-purple accent-3"
group> -->
<v-tabs color='pink'>
<v-tab class='font-weight-bold' v-for='cohort in cohorts' :key='cohort.id' @click='selectCohort(cohort.id)' v-text='cohort.name'></v-tab>
</v-tabs>
<!-- </v-btn-toggle> -->
</section>
<h3 class="font-weight-bold text-h4 p-2 mt-10 rounded border-2 border-pink-500">{{selectedCohort.name}}</h3>
<v-container class='px-6 mx-6 max-w-80'>
<Post v-for='post in posts' :key='post.URL' :post='post'/>
</v-container>
<!-- //- TextCohort.mt-1(v-for='cohort in cohorts' :key='cohort.id' :cohort='cohort')
//- li(v-for='post, id in lastPosts' :key='id')
//- .title {{post.title}}
//- <div>
//- <p></p>
//- <ul v-for='post, id in posts' :key='id'>
//- <li>
//- <span>{{post.title}} {{post.date}} {{post.url}}</span>
//- <p v-html='post.content' />
//- </li>
//- </ul>
//- </div> -->
</section>
</template>
<script>
// import AddCohort from '@/components/AddCohort.vue'
// import Cohort from '@/components/Cohort.vue'
// import TextCohort from '@/components/TextCohort.vue'
export default {
// components: { AddCohort, Cohort, TextCohort, Post },
data: () => ({ posts: [], cohorts: [], selectedCohort: {} }),
async fetch() {
this.posts = await this.$http.$get(`${process.env.baseUrl}/api/posts`)
this.cohorts = await this.$http.$get(`${process.env.baseUrl}/api/cohorts`)
this.cohorts.unshift({ id: -1, name: 'Latest' })
// const cohorts = []
},
methods: {
addCohort (cohort) {
console.error('dentro add cohort', cohort)
this.cohorts.push(cohort)
},
async selectCohort (id) {
this.selectedCohort = this.cohorts.find(c => c.id === id)
if (id === -1) {
this.posts = await this.$http.$get(`${process.env.baseUrl}/api/posts`)
} else {
const cohort = await this.$http.$get(`/api/cohort/${id}`)
this.posts = cohort.posts
}
}
}
}
</script>