<template> <div class="grid gap-2 has-contents"> <transition-group name="fadeRight" tag="div"> <div v-for="(item, index) in items" :key="'i'+index" :class="`bg-${item.type}-300 text-${item.type}-800 h-12 flex flex-col items-start justify-center shadow-2xl rounded-sm px-6`" > <div class="text-sm" v-for="message in item.messages" v-text="message"></div> </div> </transition-group> </div> </template> <script> export default { computed: { items() { var i = []; for (const field in this.$page.props.errors) { i.push({ messages: this.$page.props.errors[field], type: 'red' }); } if (this.$page.props.flash && this.$page.props.flash.success) { i.push({ messages: [ this.$page.props.flash.success ], type: 'green' }); } return i; return this.$page.props.errors; } } }; </script>