79 lines
1.3 KiB
Vue
79 lines
1.3 KiB
Vue
|
<template>
|
||
|
|
<div class="content">
|
||
|
|
<h3>{{ shelf.slug }}</h3>
|
||
|
|
|
||
|
|
<ul class="posts nolist">
|
||
|
|
<li
|
||
|
|
v-for="post in posts"
|
||
|
|
:key="post.id"
|
||
|
|
><Post :post="post" /></li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<form
|
||
|
|
class="form compose"
|
||
|
|
@submit.prevent="submitPost"
|
||
|
|
>
|
||
|
|
<div class="form-row">
|
||
|
|
<input
|
||
|
|
v-model="title"
|
||
|
|
placeholder="Title"
|
||
|
|
class="input"
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-row">
|
||
|
|
<input
|
||
|
|
v-model="link"
|
||
|
|
class="input"
|
||
|
|
placeholder="Link"
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-row">
|
||
|
|
<textarea
|
||
|
|
v-model="body"
|
||
|
|
placeholder="Body"
|
||
|
|
class="input body"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-actions">
|
||
|
|
<button class="button button-submit">Post</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref } from 'vue';
|
||
|
|
import Post from '../../../components/posts/post.vue';
|
||
|
|
|
||
|
|
import * as api from '../../../assets/js/api';
|
||
|
|
import { usePageContext } from '../../../renderer/usePageContext';
|
||
|
|
|
||
|
|
const { pageData, routeParams } = usePageContext();
|
||
|
|
|
||
|
|
const {
|
||
|
|
shelf,
|
||
|
|
posts,
|
||
|
|
} = pageData;
|
||
|
|
|
||
|
|
const title = ref();
|
||
|
|
const link = ref();
|
||
|
|
const body = ref();
|
||
|
|
|
||
|
|
async function submitPost() {
|
||
|
|
await api.post(`/api/shelves/${routeParams.id}/posts`, {
|
||
|
|
title: title.value,
|
||
|
|
link: link.value,
|
||
|
|
body: body.value,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.posts {
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
}
|
||
|
|
</style>
|