How to Make Input Tags in Livewire

#1

What seems to be the problem: I can’t integrate bootstrap input tags with livewire, so I decide to make it manually using alpine js but I can not do.

Steps to Reproduce:

Are you using the latest version of Livewire: Yes

Do you have any screenshots or code examples: No

#2

Hey, @lordfarhan

You can simply use Str::slug('name') in your component.

Or if you want to make slug created automatically when filling your model info use observer.

In your model

...
use Illuminate\Support\Str;
...
proteced static function boot()
{
    parent::boot();
   
    self::saving(function ($model) {
        $model->slug = Str::slug($model->name);
   });
}

If you want to show the mealtime slug when the user type (e.g: name field):

$this->name;
$this->slug;
public function updatedName($field)
{
   $this->slug = Str::slug($field);
}

In your blade

<input type"text" wire:model="name"/>
<input type="text" wire:model="slug"/>

PS: You can do both at the same time and this up to you.

#3

Thanks for your reply @skywalker but I think that’s not the answer that I need.
My problem is about how to implement boostrap tags input, that I found it here [https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/] into my laravel livewire project.

#4

OH! Sorry for that I didn’t notice.

Maybe try to grab the input and add wire attribute manually

document.getElementById('...').setAttribute('wire:model', 'tags');

Or take a look at Caleb’s Tags example

image

#5

Thanks again @skywalker , I didn’t think there was example from that, I just edited the interface and works well. But the value return the last tag I entered as String, How to catch all tag value as array?