Untitled

<template>
    <div class="container mt-4">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Create Post</h4>
                <hr>
                <form @submit.prevent="store">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="">Title</label>
                                <input type="text" class="form-control" v-model="post.title"
                                    placeholder="Masukan judul post">
                                <!-- validation -->
                                <small v-if="validation.title" class="text-danger">
                                    {{ validation.title[0] }}
                                </small>
                            </div>

                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="">Category</label>
                                <select class="form-control" v-model="post.category_id">
                                    <option value="">Pilih Kategori</option>
                                    <option v-for="category in categories" :key="category.id" :value="category.id">
                                        {{ category.name }}
                                    </option>
                                </select>
                                <!-- validation -->
                                <small v-if="validation.category_id" class="text-danger">
                                    {{ validation.category_id[0] }}
                                </small>
                            </div>

                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md">
                            <div class="mb-3">
                                <label for="content">Content</label>
                                <textarea name="" v-model="post.content" class="form-control" cols="30"
                                    rows="10"></textarea>

                                <!-- validation -->
                                <small v-if="validation.content" class="text-danger">
                                    {{ validation.content[0] }}
                                </small>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md">
                            <button class="btn btn-primary" type="submit">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';
import { onMounted, reactive, ref } from 'vue';

export default {

    setup() {
        const post = reactive({
            title: '',
            category_id: '',
            content: ''
        });

        const validation = ref([]);
        const categories = ref([]);

        const router = useRouter();
        const route = useRoute();

        onMounted(() => {
            axios.get('http://localhost:8000/api/category').then(response => {
                categories.value = response.data.data;
                // console.log(response);
            }).catch(error => {
                console.log(error);
            })

            axios.get(`http://localhost:8000/api/post/${route.params.id}`).then(response => {
                post.title = response.data.data.title;
                post.category_id = response.data.data.category_id;
                post.content = response.data.data.content;
            }).catch(error => {
                console.log(error);
            })
        });

        function update() {
            let title = post.title;
            let category_id = post.category_id;
            let content = post.content;

            axios.put(`http://localhost:8000/api/post/${route.params.id}`, {
                title: title,
                category_id: category_id,
                content: content
            }).then(() => {
                router.push({
                    name: 'post.index'
                })
            }).catch(error => {
                validation.value = error.response.data
            });
        }

        return { post, validation, router, update }
    }

}
</script>