<script setup> import { computed } from 'vue'; import { usePage } from '@inertiajs/vue3'; import NotificationBarInCard from '@/Components/NotificationBarInCard.vue'; // const errors = computed(() => usePage().props.errors); // const hasErrors = computed(() => Object.keys(props.errors.value).length > 0); const props = defineProps({ errors: Object, }); const hasErrors = computed(() => { return props.errors != null && Object.keys(props.errors).length > 0; }); </script> <template> <NotificationBarInCard v-if="hasErrors" color="danger"> <b>Whoops! Something went wrong.</b> <span v-for="(error, key) in errors" :key="key">{{ error }}</span> </NotificationBarInCard> </template>