kdion4891 / laravel-livewire-forms

A dynamic, responsive Laravel Livewire form component with realtime validation, file uploads, array fields, and more.
243 stars 54 forks source link

Error: wire:id #3

Open tanthammar opened 4 years ago

tanthammar commented 4 years ago

Trying to follow the basic example in a fresh Laravel 7 install. Did

php artisan make:form UserCreateForm --model=User
namespace App\Http\Livewire;

use App\User;
use Kdion4891\LaravelLivewireForms\Field;
use Kdion4891\LaravelLivewireForms\FormComponent;
class UserCreateForm extends FormComponent
{
    public function fields()
    {
        return [
            Field::make('Name')->input()->rules('required'),
        ];
    }

    public function success()
    {
        User::create($this->form_data);
    }

    public function saveAndStayResponse()
    {
        return redirect()->route('home');
    }

    public function saveAndGoBackResponse()
    {
        return redirect()->route('welcome');
    }
}

home.blade.php

<div class="card-body">
You are logged in!
@livewire('user-create-form')
</div>

Error:

Livewire Error:

Cannot find parent element in DOM tree containing attribute: [wire:id].

Usually this is caused by Livewire's DOM-differ not being able to properly track changes.

Reference the following guide for common causes: https://laravel-livewire.com/docs/troubleshooting 

Referenced element:

<input id="name" type="text" class="form-control " autocomplete="" placeholder="" wire:model.lazy="form_data.name">
elsayed85 commented 4 years ago

same problem

kdion4891 commented 4 years ago

I believe it’s from some recent live wire changes. This is why I hate front end dev. Everything you do becomes outdated in a month.

I’ll have to read the commits and figure out what’s going on when I have time. If anyone figures out a solution in the meantime feel free to submit a PR.

HowardF commented 4 years ago

Wondering if this is related to the naming of the element. I found in another unrelated livewire application that error went away when I just allowed element to be identified by name="xxxx" and removed id="xxxx"

tanthammar commented 4 years ago

I found this on the livewire issue page. Have not tested yet, but I did have laravel 7 and the livewire-vue plugin installed. Did delete the repo where I tested this package. Maybe something to check out?

https://github.com/livewire/livewire/issues/745

rabol commented 4 years ago

Just tried... no issue

in Laravel 7 it should be <livewire:user-create-form/>

aryby commented 4 years ago

just make all content of your component in one div

in your component user-create-form.php
<div>
     //content 
</div>
matiazar commented 3 years ago

just make all content of your component in one div

in your component user-create-form.php
<div>
     //content 
</div>

Saved my day....

from documentation: Make sure your Blade view only has ONE root element.