44 lines
1.2 KiB
Vue
44 lines
1.2 KiB
Vue
|
<template>
|
||
|
|
<transition name="fade">
|
||
|
|
<div v-if="errorMessage" class="has-error text-sm text-red-500 -bottom-3"
|
||
|
|
v-html="errorMessage"
|
||
|
|
/>
|
||
|
|
</transition>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'HasError',
|
||
|
|
props: {
|
||
|
|
form: {
|
||
|
|
type: Object,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
field: {
|
||
|
|
type: String,
|
||
|
|
required: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
errorMessage () {
|
||
|
|
if (!this.form || !this.form.errors || !this.form.errors.any()) return null
|
||
|
|
const subErrorsKeys = Object.keys(this.form.errors.all()).filter((key) => {
|
||
|
|
return key.startsWith(this.field) && key !== this.field
|
||
|
|
})
|
||
|
|
const baseError = this.form.errors.get(this.field) ?? (subErrorsKeys.length ? 'This field has some errors:' : null)
|
||
|
|
// If no error and no sub errors, return
|
||
|
|
if (!baseError) return null
|
||
|
|
|
||
|
|
return `<p class="text-red-500">${baseError}</p><ul class="list-disc list-inside">${subErrorsKeys.map((key) => {
|
||
|
|
return '<li>' + this.getSubError(key) + '</li>'
|
||
|
|
})}</ul>`
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getSubError (subErrorKey) {
|
||
|
|
return this.form.errors.get(subErrorKey).replace(subErrorKey, 'item')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|