vue-crud/src/views/Edit.vue

<template>
    <div class="home-page">
        <LoadingScreen
            loading-message="Fetching data..."
            v-if="!travelFetched"
        />
        <TravelForm v-if="travelFetched" :travel-data="travel" />
    </div>
</template>

<script>
import TravelForm from '../components/TravelForm';
import LoadingScreen from '../components/LoadingScreen';
export default {
    name: 'Create',
    components: { TravelForm, LoadingScreen },
    created() {
        this.$root.directusClient
            .getItems('travel', {
                filter: { id: { eq: this.$route.params.id } },
            })
            .then(response => {
                if (response.data.length === 0) {
                    throw new Error();
                }
                this.travel = response.data[0];
                this.travelFetched = true;
            })
            .catch(() => {
                this.$root.$emit('notify', 'Could not find traveldata');
                this.$router.push({ name: 'Home' });
            });
    },
    data() {
        return {
            travelFetched: false,
            travel: {},
        };
    },
};
</script>