Form $request->name always returns name of Livewire component

@OussamaMater Yes! You just saved a Livewire noob a few hours of hair pulling. Thank you.

@Riley132 happy to help :)

I highly recommend watching the official casts to get you started very well, it covers most of the things you'll need

• https://laravel-livewire.com/screencasts/installation

Then this course is great

• https://laracasts.com/series/livewire-basics

And finally once you feel comfortable, this course by Caleb himself (Livewire creator), an advanced course

• https://laracasts.com/series/livewire-uncovered

@OussamaMater Thank you! Hey, while I have you, I have another component called ItemList that goes to the database, grabs all the items and spits them out on the page. When I click Submit, how would I update the ItemList component without refreshing the page?

class ItemList extends Component
{
    public $items = [];

    /**
     * Renders the component
     */
    public function render()
    {
        $this->items = $this->getItemList();
        return view('livewire.item-list', $this->items);
    }

    /**
     * Returns a list of items.
     */
    public function getItemList()
    {
        return DB::table('items')->get();
    }
}

For context, I'm doing this to prepare for an interview for a junior back-end Laravel position, so I'm trying to spend as little time on the front-end as possible, haha! I just went with Livewire because it's the only front-end Laravel tool I've used.

@Riley132 You don't have to worry about page refreshes, Livewire does everything using XHR requests, so there won't be any page refreshes anyway.

I don't know what your views looks like, but if it's a simple project a single component will do the job actually, where you can have two methods to create and fetch the items, and every time an item is created, Livewire with automatically re-execute the render method, therefore it will fetch the latest records.

If you still want to have two components, you will need a way so they can talk right? you have to use "events" and "listeners", so you code becomes like this

	public $name; // define this property you want to bind to the input
    public function store()
    {
		// Made it a bit shorter
        Item::create(['name ' => $this->name]);
		$this->emit('itemAdded'); // creating an event to alert the other component
    }

And fetch the items again

class ItemList extends Component
{
	protected $listeners = ['itemAdded' => '$refresh']; // handling that event, by re-rendering the component
    public $items = [];

    /**
     * Renders the component
     */
    public function render()
    {
        $this->items = $this->getItemList();
        return view('livewire.item-list', $this->items);
    }

    /**
     * Returns a list of items.
     */
    public function getItemList()
    {
        return DB::table('items')->get();
    }
}

Hopefully this made the idea clear

Read more about event and listeners here

• https://laravel-livewire.com/docs/2.x/events

@OussamaMater Okay, another very interesting issue. This works fine when there are no items in the list, but when I attempt to add a second, there appears to be a wire:id conflict when I look in the inspector.

When I add a second item, it doesn't appear, and this is what I see in the inspector (before manual refresh):

<div wire:id="PBTY9D3mszzyiY3CTCHJ">
        
    <div wire:id="EBVHu4JMnWYUlhgtQssu" class="flex">
        <input type="checkbox" name="completed">
        <p>item 1</p>
    </div>        
    <div wire:id="EBVHu4JMnWYUlhgtQssu"></div>

</div>

After manual refresh (I've removed comments and fluff from both of these for your readability):

<div wire:id="A8MABKi22a8itwRZqQZU">
        
    <div wire:id="kdMF8uSb0hNMLWzYuDyz" class="flex">
        <input type="checkbox" name="completed">
        <p>item 1</p>
    </div>

    <div wire:id="Bm6hkZkimzticoqbuXZ3" class="flex">
        <input type="checkbox" name="completed">
        <p>item 2</p>
    </div>

</div>

This is my item-list.blade.php view:

<div>
    @foreach($items as $item)    
        <livewire:item name="{{ $item->name }}" completed="{{ $item->completed }}" />
    @endforeach
</div>

Sorry for the prolonged back-and-forth... I'll get there!

Edit: I just fixed the issue by forgetting about the item Livewire component and pasting it's contents in that loop. I guess I have too many components going on. I really appreciate your help my man! I think I'm good to go now.

@Riley132 it's fine, you can always start a new thread, so we keep things clean for future comers, but for not try adding a key, because you are nesting components

    @foreach($items as $item)    
        <livewire:item name="{{ $item->name }}" completed="{{ $item->completed }}" :wire:key="$item->id"/>
    @endforeach

Reference

• https://laravel-livewire.com/docs/2.x/nesting-components#keyed-components

If you have more questions, I would love to help, in separate threads :)