Trigger function on field entry - how?

#1

I have two fields - title and slug.
When the user enters a title I would like to trigger my function that generates a slug.

How do I best achieve that?

#2

Hi @kgraversen
Can you give me bit more info?
Do you want to generate it while user is typing or once they’ve switched to other input fields?

image
image1016×812 46.6 KB

You can use wire:change.lazy = “$emitSelf(‘nameOfFunction’)”
i guess you know how to bind this in your component.

1 Like
#3

Hey @kgraversen
You can do the following:

In the Updated method inside Your Component or in UpdatedTitle in realtime

...
public function updated($fields)
{
    $this->slug = this->generateSlug($this->title);

   // using $fields to validate your inputs
}

protected function generateSlug($string = null, $separator = "-")
{
        if (is_null($string)) {
            return "";
        }

        $slug = str_replace(' ', $separator, $string);

        return $slug;
}
...

When you are calling your create method

public function create()
{
  $this->slug = $this->generateSlug($this->title);
}

In your blade

<input type="text" wire:model="title"/>
<input type="text" wire:model="slug"/>
#4

Thanks Hafiz
So, when the user is filling in the Title field or move to next field, I would like the Slug to be populated with the result of the function.

#5

Thanks a lot Oussama Sid
I had missed out on the Updated() function.

A minor feedback back to you.
In my GenerateSlug function I use $slug = Str::slug($string, $separator); (together with use Illuminate\Support\Str;)
This provides a “better” slug as it removes national and special characters.

#6

Hey, @kgraversen,
I gave you my code because I deal with the Arabic Letters and Str::slug($string, $separator) doesn’t fit my needs :smile:

I’m Glade You solved your issue