I'm using livewire and Laravel in my forms.

A problem that I noticed is that if we have an input like this:

<input type="text" wire:model.debounce.500ms="first_name" id="first_name" name="first_name" />

Then when user modifies the wire:model.debounce.500ms attribute value or totally removes that in inspect element, after typing into that input because livewire can't find the model name so it throws an error and the error will be shown in a modal that says this:

Too few arguments to function Illuminate\Support\Str::studly(), 0 passed in C:\xampp\htdocs\laravel-project\example\vendor\livewire\livewire\src\helpers.php on line 13 and exactly 1 expected

So I want to handle these errors. I know I can change APP_DEBUG in .env file to false but again it shows the error modal saying there is a 500 error but I don't want the user's manipulations affects the livewire or at least not to show these modals and just detect them.

CodePudding user response：

You can use a mutation observer to watch for mutations on your inputs.

We can use document.evaluate to find all wire:model elements (see this answer)

let attributeObserver = new MutationObserver(function(mutations) {
    // Do something
});

let wireModels = document.evaluate('//*/attribute::*[starts-with(name(), "wire:model")]', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);

for (var i = 0; i < wireModels.snapshotLength; i   ) {
   let element = nodesSnapshot.snapshotItem(i).ownerElement.
   attributeObserver.observe(element, { attributes: true });
});