xmlhttprequestlaravel-livewire

livewire view don't send any xhr request to component


I have a select html tag in livewire view:

<select wire:model="categoryId" wire:change="$emit('attr_cat', $event.target.value)" name="category_id" class="form-control">
    <option value="0">Select category</option>
    @foreach($categories as $category)
        <option value="{{$category->id}}">{{ $category->name }}</option>
        @if(count($category->childs))
            @include('admin.categories.subcategorylist',['childs' => $category->childs])
        @endif
    @endforeach
</select>

and a livewire component with following code:

namespace App\Http\Livewire\Admin;

use App\Models\Attribute;
use App\Models\Category;
use App\Models\CategoryAttribute;
use Barryvdh\Debugbar\Facade as Debugbar;
use Livewire\Component;

class CategoryAttributes extends Component
{
    public $attributeId;
    public $categoryId;
    public $attributeCategories;
    public $categories;
    protected $listeners = ['attr_cat' => 'addAttributeToCategory'];

    public function mount()
    {
        $this->attributeCategories = Attribute::find($this->attributeId)->categories()->get();
        $this->categories = Category::whereNull('category_id')->orderBy('name')->with('childs')->get();
        $this->categoryId = 0;
    }

    public function render()
    {
        return view('livewire.admin.category-attributes');
//        return view('livewire.admin.cat-attr-test');
    }

    public function addAttributeToCategory($value){
        Debugbar::addMessage($value);
        CategoryAttribute::create([
            'category_id' => $this->categoryId,
            'attribute_id' => $this->attributeId,
        ]);
    }

    public function updatedCategoryId(){
        Debugbar::addMessage($this->attributeId);
    }
}

and mount livewire component with this line in my blade view:

@livewire('admin.category-attributes', ['attributeId' => $attribute->id], key('attr-'.$attribute->id))

but, when I change selected item, nothing happens and no xhr requests are sent to the server by the browser.

Let me say this too, I have inserted @livewireStyles and @livewireScripts in master blade file and they are loaded correctly. Thank you for your help.


Solution

  • I found the solution to my problem. I had to put all the contents of the view in a standalone tag so that livewire could assign an ID to it. Otherwise, livewire will refuse to send any request to the server.

    Livewire view code:

    <div>
        <select wire:model="categoryId" wire:change="$emit('attr_cat', $event.target.value)" name="category_id" class="form-control">
            <option value="0">Select category</option>
            @foreach($categories as $category)
                <option value="{{$category->id}}">{{ $category->name }}</option>
                @if(count($category->childs))
                    @include('admin.categories.subcategorylist',['childs' => $category->childs])
                @endif
            @endforeach
        </select>
    </div>