Access Livewire's Error Bag with Alpine

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()">



        function errorCheck() {
            return {
                editing: false,
                specificErrors: ' {{ $errors->hasAny(['person.firstname','person.lastname'])  }}',
                openEdit() { this.editing = true; console.log(this.specificErrors); },
                closeEdit() { this.editing = false},

When moving the specificErrors property to the Script tags, it never gets set. Can the errorbag not be accessed in this way?

In the end I stuck to doing this inline. With the specificErrors property defined in line, I’ve used the output of that together with an isEditing property. Armed with both these props. I can use the the x-show to control whether to show the input fields based on whether the form is in editing mode , or if there are still errors outstanding. still not sure why I couldn’t get it to work in the Script tags. - will be down to my lack of experience with this.