53c748a074
- Added Blog and BlogPost models with necessary fields and relationships. - Created blogRouter for handling blog-related API endpoints including CRUD operations. - Developed BlogService for business logic related to blogs and posts, including sharing functionality. - Implemented API client methods for frontend to interact with blog-related endpoints. - Added internationalization support for blog-related text in English and German. - Created Vue components for blog editing, listing, and viewing, including a rich text editor for post content. - Enhanced user experience with form validations and dynamic visibility settings based on user input.
30 lines
825 B
Vue
30 lines
825 B
Vue
<template>
|
||
<div class="blog-list">
|
||
<h1>Blogs</h1>
|
||
<div class="toolbar">
|
||
<router-link v-if="$store.getters.isLoggedIn" class="btn" to="/blogs/create">Neuen Blog erstellen</router-link>
|
||
</div>
|
||
<div v-if="loading">Laden…</div>
|
||
<div v-else>
|
||
<div v-if="!blogs.length">Keine Blogs gefunden.</div>
|
||
<ul>
|
||
<li v-for="b in blogs" :key="b.id">
|
||
<router-link :to="`/blogs/${b.id}`">{{ b.title }}</router-link>
|
||
<small> – {{ b.owner?.username }}</small>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { listBlogs } from '@/api/blogApi.js';
|
||
export default {
|
||
name: 'BlogListView',
|
||
data: () => ({ blogs: [], loading: true }),
|
||
async mounted() {
|
||
try { this.blogs = await listBlogs(); } finally { this.loading = false; }
|
||
}
|
||
}
|
||
</script>
|