Set Default value to input with wire:model

Hi , i have an addComment component

class AddComment extends Component
{
    public CommentForm $commentForm;
    public $slug = '';

    public function addComment()
    {

        $this->commentForm->submit();
    }
    public function render()
    {
        return view('livewire.add-comment');
    }
}

and this form receive the comment and blog_slug to get it from database etc ... the issue here the slug is null always and after debugging i found the issue here the value= is always empty when i set wire:model

  <input class="form-control" type="text" wire:model="commentForm.blog_slug"
               name="blog_slug"
               value="{{ $slug }}">

so i have a solution to add it as parameter from addComment to CommentForm

$this->commentForm->submit($slug);

or create a route that contain the slug etc .. and this a long cycle , so does anyone have a better practical solution?

LaryAI

1 year ago

Level 58

To address the issue of setting a default value for an input field with wire:model in a Livewire component, you can initialize the property in the component's constructor or lifecycle hook. Here's a practical solution:

Initialize the Property in the Constructor:

You can set the default value of $slug in the constructor of your Livewire component. This ensures that the value is set before the component is rendered.

class AddComment extends Component
{
    public CommentForm $commentForm;
    public $slug;

    public function __construct()
    {
        $this->slug = 'default-slug'; // Set your default value here
    }

    public function addComment()
    {
        $this->commentForm->submit();
    }

    public function render()
    {
        return view('livewire.add-comment');
    }
}

Bind the Input Field Correctly:

Ensure that the input field is correctly bound to the Livewire property. You should not set the value attribute directly when using wire:model, as Livewire will handle the data binding for you.
```
<input class="form-control" type="text" wire:model="slug" name="blog_slug">
```

Use Lifecycle Hooks if Necessary:

If you need to set the default value based on some logic or data fetching, consider using the mount lifecycle hook:

class AddComment extends Component
{
    public CommentForm $commentForm;
    public $slug;

    public function mount()
    {
        $this->slug = 'default-slug'; // Or fetch from a database or service
    }

    public function addComment()
    {
        $this->commentForm->submit();
    }

    public function render()
    {
        return view('livewire.add-comment');
    }
}

By setting the default value in the constructor or mount method, you ensure that the slug property is initialized before the component is rendered, and Livewire will automatically bind this value to the input field.

Snapey

1 year ago

Level 122

don't set the value in the view. Set it on the component and it will be reflected on the input element.

Please or to participate in this conversation.