I have a simple Livewire component to represent a Person model. I have a description list form that shows various fields from the Person model. Each line on the form, has an edit button to enable inline editing.
i.e Pressing the edit link below,
Simply changes my Alpine property ‘editing’ (I thought Alpine would be better for this than loads of network requests if I moved the property to the component)
<div x-data="{ editing:false } >
to hide the view above, and to show the input fields below
Everything is working fine when input data is valid. Clicking the Tick calls my savePerson() method in the component, which saves the Person record.
<button x-show="editing" wire:click="savePerson" @click="editing = !editing" etc
What I want to do now is handle the case where errors are present in $errors when a user attempts to save.
I can grab the LiveWire errorbag inline in the x-data if I do this.
<div x-data="{ editing:false, specificErrors: ' {{ $errors>hasAny(['person.firstname','person.lastname']) }}' }" >
The property above specificErrors works correctly. If either firstname or lastname has an error; it answers “1”.
All I want to do is use the specificErrors property above to somehow prevent clicking the tick icon from closing where there are validation errors. I can’t see how to do this inline.
I thought things might be easier if I moved to a script tag i.e
<div x-data="errorCheck()">
//etc
//and
<script>
function errorCheck() {
return {
editing: false,
specificErrors: ' {{ $errors->hasAny(['person.firstname','person.lastname']) }}',
openEdit() { this.editing = true; console.log(this.specificErrors); },
closeEdit() { this.editing = false},
}
}
</script>
When moving the specificErrors property to the Script tags, it never gets set. Can the errorbag not be accessed in this way?