SpatieTags

Nested Livewire Component

DEPRECATED!

If you decide to use this field anyway, know that you'll get an error in console: Livewire: Multiple root elements detected. This is not supported.

Livewire doesn't regenerate the child components wire:end attribute.

It's only a warning but it may break other js. See: https://github.com/livewire/livewire/discussions/3887

Use Tags or TagSearch instead.

The component still exists in the codebase but it won't be maintained. If you continue to use it, you have to add the listener to your components.

protected $listeners = ['tallFillField'];

public function tallFillField($array)
{
    $this->tags = $array['value'];
}

Important. If you have any issues in your form. Try to put this field last. Livewire/Alpine can get messy when there are nested components.

First Tab

Component

Headless

If your Eloquent model exists the Spatie Tags Livewire component syncs the tags with the model. No handler or listener required.

If your Eloquent model doesn't exist you must sync the tags, after creating the model. You also have to add a handler and listener, see below.

Livewire component with User

public $tags;
public ?User $user;

//Add a listener/handler if "User" doesn't exist
//This is normally handled by the TallForms trait,
//but if the field is headless, you must add it manually.

//The SpatieTags component only emits an event if !$model->exists.
protected $listeners = ['tallFillField'];

public function tallFillField($array)
{
    $this->tags = $array['value'];
}


public function submit()
{
    if(!$user->exists) {
        //create the User
        //sync the tags, see TallForms\Traits\Helpers syncTags()
    }
}

Blade

<livewire:tall-spatie-tags
    :model="$user"
    :field="SpatieTags::blade('tags')->fieldToArray()"
    :tags="$tags"
/>