protonemedia / laravel-form-components

A set of Blade components to rapidly build forms with Tailwind CSS (v1.0 and v2.0) and Bootstrap 4/5. Supports validation, model binding, default values, translations, Laravel Livewire, includes default vendor styling and fully customizable!
https://protone.media/blog/laravel-form-components-to-rapidly-build-forms-with-tailwind-css-and-bootstrap-4
MIT License
814 stars 104 forks source link

@wire and @bind do not work together #99

Open Sans84 opened 1 year ago

Sans84 commented 1 year ago
use Livewire\Component;
use App\Models\Contact;

class ContactForm extends Component
{
    public $contact;

    public function mount(Contact $contact)
    {
        $this->contact = $contact;
        $this->contact->name = 'Simple name';
    }

    public function submit()
    {
        $this->validate();

        $this->contact->save();
    }

    public function rules()
    {
        return [
            'contact.name' => 'required|min:6',
            'contact.email' => 'required|email',
        ];
    }

    public function render()
    {
        return view('livewire.contact-form');
    }
}

view:

<x-form wire:submit.prevent="submit">
    @wire
    @bind($contact)
        <x-form-input name="name" />
        <x-form-input name="email" />
    @endbind
    @endwire

    <x-form-submit>Save Contact</x-form-submit>
</x-form>

After rendering, the "name" input remains empty

expectation: the "name" input = ''Simple name' and binding wire:model="contact.name"