Wire:model not working with other component

I am trying to update my select input
I tried disabling all js codes but it didn’t work

It’s okay if I just use this code on the blade

<div class="form-group">
    <select wire:model="selectedValue">
    @foreach($options as $key => $value)
        <option value="{{ $key }}" wire:key="{{ $key }}">{{ $value }}</option>
    @endforeach
</select>

You selected: {{ $selectedValue }}

<button wire:click.prevent="updateValues">Update Values</button>

but this error pops up when used with other codes,

Trying to get property ‘id’ of non-object

all codes on the blade

<div>
<div wire:ignore.self class="row">
    <div class="col-sm">
        <div class="card">
            <div class="card-body">
                <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                    <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Main</a>
                    <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Stock</a>
                    <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Price</a>
                    <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Images</a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-10">
        <div class="card">
            <div class="card-header">
                <div class="card-title">
                    <h5 class="card-label">Create New Product
                        <i class="mr-2"></i>
                        <small class="">Product</small></h5>
                </div>

                <div class="card-toolbar float-right">
                    <a href="#" class="btn btn-light-primary font-weight-bolder mr-2 btnPrev disabled">
                        <i class="fas fa-arrow-left icon-sm"></i>
                        Prev
                    </a>
                    <a href="#" class="btn btn-light-primary font-weight-bolder mr-2 btnNext">
                        <i class="fas fa-arrow-right icon-sm"></i>
                        Next
                    </a>
                    <div class="btn-group">
                        <button class="btn btn-primary font-weight-bolder">
                            <i class="fas fa-check icon-sm"></i>Save Form</button>
                    </div>
                </div>

            </div>
            <div class="card-body">
                <div class="tab-content" id="v-pills-tabContent">
                    <!-- Tab 1-->
                    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
                        <div class="row">
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <select wire:model="selectedValue">
                                        @foreach($options as $key => $value)
                                            <option value="{{ $key }}" wire:key="{{ $key }}">{{ $value }}</option>
                                        @endforeach
                                    </select>

                                    You selected: {{ $selectedValue }}

                                    <button wire:click.prevent="updateValues">Update Values</button>
                                </div>
                            </div>
                            <div class="col-sm-9">
                                <div class="form-group">
                                    <h6>Code</h6>
                                    <input type="text" class="form-control form-control-solid" placeholder="Enter ..." autofocus>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <h6 for="exampleInputEmail1">Category</h6>
                                    <select class="form-control form-control-solid" name="categories">
                                        @foreach($allFeature['categories'] as $key)
                                            <option value="{{ $key->id }}">{{ $key->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-9">
                                <div class="form-group">
                                    <h6>Item Name</h6>
                                    <input type="text" class="form-control form-control-solid" placeholder="Enter ..." name="name">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <h6 for="exampleInputEmail1">Author</h6>
                                    <select class="form-control form-control-solid" name="authors">
                                        @foreach($allFeature['authors'] as $key)
                                            <option value="{{ $key->id }}">{{ $key->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <h6 for="exampleInputEmail1">Publisher</h6>
                                    <select class="form-control form-control-solid" name="publishers">
                                        @foreach($allFeature['publishers'] as $key)
                                            <option value="{{ $key->id }}">{{ $key->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <h6>Release Year</h6>
                                <input type="text" class="form-control form-control-solid" placeholder="Select ..." id="datepicker" name="year">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <h6 for="exampleInputEmail1">Print Language</h6>
                                    <select class="form-control form-control-solid" name="languages" id="selectpicker">
                                        @foreach($allFeature['languages'] as $key)
                                            <option value="{{ $key->id }}">{{ $key->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <h6 for="exampleInputEmail1">Book Language</h6>
                                    <select class="form-control form-control-solid" name="book_languages" id="selectpicker">
                                        @foreach($allFeature['languages'] as $key)
                                            <option value="{{ $key->id }}">{{ $key->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <h6 for="exampleInputEmail1">Translator</h6>
                                    <select class="form-control form-control-solid" name="translator" id="selectpicker">
                                        @foreach($allFeature['categories'] as $key)
                                            <option value="{{ $key->id }}">{{ $key->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <h6 for="exampleInputEmail1">Country</h6>
                                    <select class="form-control form-control-solid" name="countries" id="selectpicker">
                                        @foreach($allFeature['countries'] as $key)
                                            <option value="{{ $key->id }}">{{ $key->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Tab 1-->

                    <!-- Tab 2-->
                    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
                            <span id="clone">
                                <span id="btnPosition">
                                    <div class="col-md-2 ribbon ribbon-right float-right">
                                        <a href="javascript:;" id="add-more">
                                            <div class="ribbon-target" style="top: 26px; height: 37px; right: -20px">
                                                <span class="ribbon-inner bg-olive"></span>
                                                <i class="fas fa-plus-circle text-white mr-2"></i>Add
                                            </div>
                                        </a>
                                    </div>
                                </span>
                            <div class="row">
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <h6>SKU</h6>
                                        <input type="text" class="form-control form-control-solid" placeholder="Enter ...">
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <h6 for="exampleInputEmail1">Unit</h6>
                                        <select class="form-control form-control-solid" name="units" id="selectpicker">
                                            @foreach($allFeature['units'] as $key)
                                                <option value="{{ $key->id }}">{{ $key->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <h6 for="exampleInputEmail1">Item Location</h6>
                                        <select class="form-control form-control-solid" name="location">
                                            @foreach($allFeature['categories'] as $key)
                                                <option value="{{ $key->id }}">{{ $key->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <h6 for="exampleInputEmail1">Vendor</h6>
                                        <select class="form-control form-control-solid">
                                            <option>option 1</option>
                                            <option>option 2</option>
                                            <option>option 3</option>
                                            <option>option 4</option>
                                            <option>option 5</option>
                                        </select>
                                    </div>
                                </div>

                            </div>
                            </span>
                        <div class="separator separator-dashed my-3"></div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group form-control-solid">
                                    <h6>Dimension <span class="text-muted">(cm)</span></h6>
                                    <div class="dimension-fields">
                                                <span class="dimension-input">
                                                    <input id="ember297" class="form-control form-control-solid text-center" type="text" name="length">
                                                </span>
                                        <span class="dimension-seperator">x</span>
                                        <span class="dimension-input">
                                                        <input id="ember298" class="form-control form-control-solid text-center" type="text" name="width">
                                                    </span>
                                        <span class="dimension-seperator">x</span>
                                        <span class="dimension-input">
                                                        <input id="ember299" class="form-control form-control-solid text-center" type="text" name="height">
                                                    </span>
                                    </div>
                                    <span class="form-text text-muted">(Length x Width x Height)</span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <h6>Weight <span class="text-muted">(kg)</span></h6>
                                    <input type="text" class="form-control form-control-solid " name="weight" placeholder="Weight">
                                    <span class="form-text text-muted">Please enter your product weight</span>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <h6>Number of page</h6>
                                    <input type="text" class="form-control form-control-solid " name="weight">
                                    <span class="form-text text-muted">Please enter your email address.</span>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <h6 for="exampleInputEmail1">Manufacturer</h6>
                                    <select class="form-control form-control-solid">
                                        @foreach($allFeature['categories'] as $key)
                                            <option value="{{ $key->id }}">{{ $key->name }}</option>
                                        @endforeach
                                    </select>
                                    <span class="form-text text-muted">Please enter your email address.</span>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <h6 for="exampleInputEmail1">Brand</h6>
                                    <select class="form-control form-control-solid">
                                        @foreach($allFeature['categories'] as $key)
                                            <option value="{{ $key->id }}">{{ $key->name }}</option>
                                        @endforeach
                                    </select>
                                    <span class="form-text text-muted">Please enter your email address.</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Tab 2-->

                    <!-- Tab 3-->
                    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
                        <div class="row row-col-divider">
                            <div class="col-md-6 d-flex justify-content-center">
                                <div class="col-sm-10">
                                    <h4 class="font-size-lg mb-lg-4">Purchase Information</h4>
                                    <!--begin::Input-->
                                    <div class="form-group" style="margin: 0">
                                        <h6>Cost Price</h6>
                                    </div>
                                    <!--end::Input-->
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <select class="form-control form-control-solid" name="purchase_currency" id="selectpicker">
                                                <option>TRY</option>
                                                <option>EURO</option>
                                                <option>USD</option>
                                                <option>GBP</option>
                                            </select>
                                        </div>
                                        <input type="text" class="form-control form-control-solid" name="purchase_price">
                                    </div><br>

                                    <!--begin::Input-->
                                    <div class="form-group">
                                        <h6>Description</h6>
                                        <textarea class="form-control form-control-solid" id="input-field-id" rows="3" maxlength="50" name="purchase_desc"></textarea>
                                        <span class="form-text text-muted">Please enter your email address.</span>
                                    </div>
                                    <!--end::Input-->
                                    <!--begin::Input-->
                                    <div class="form-group">
                                        <h6>Tax</h6>
                                        <select class="form-control form-control-solid" name="purchase_tax" id="selectpicker">
                                            <option></option>
                                        </select>
                                        <span class="form-text text-muted">Please enter your email address.</span>
                                    </div>
                                    <!--end::Input-->
                                </div>
                            </div>


                            <div class="col-md-6 d-flex justify-content-center">
                                <div class="col-sm-10">
                                    <h4 class="font-size-lg mb-lg-4">Sales Information</h4>
                                    <!--begin::Input-->
                                    <div class="form-group" style="margin: 0">
                                        <h6>Selling Price</h6>
                                    </div>
                                    <!--end::Input-->
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <select class="form-control form-control-solid" name="selling_currency" id="selectpicker">
                                                <option>TRY</option>
                                                <option>EURO</option>
                                                <option>USD</option>
                                                <option>GBP</option>
                                            </select>
                                        </div>
                                        <input type="text" class="form-control form-control-solid" name="selling_price">
                                    </div><br>

                                    <!--begin::Input-->
                                    <div class="form-group">
                                        <h6>Description</h6>
                                        <textarea class="form-control form-control-solid" rows="3" maxlength="50" name="selling_desc"></textarea>
                                        <span class="form-text text-muted">Please enter your email address.</span>
                                    </div>
                                    <!--end::Input-->
                                    <!--begin::Input-->
                                    <div class="form-group">
                                        <h6>Tax</h6>
                                        <select class="form-control form-control-solid" name="selling_tax" id="selectpicker">
                                            <option></option>
                                        </select>
                                        <span class="form-text text-muted">Please enter your email address.</span>
                                    </div>
                                    <!--end::Input-->
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Tab 3-->

                    <!-- Tab 4-->
                    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
                        <div class="form-group">
                            <h6>Images</h6>

                            <div class="dropzone dropzone-default dropzone-primary col-md-12 ribbon ribbon-top ribbon-ver" id="dropzone">
                                <div class="ribbon-target bg-primary" style="top: -2px; right: 20px; display: none">

                                </div>
                                <div class="dropzone-msg dz-message needsclick">
                                    <h3 class="dropzone-msg-title">Drop files here or click to upload.</h3>
                                    <span class="dropzone-msg-desc">Upload up to 10 files</span>
                                </div>
                                <div class="dropzone-items row m-3">
                                    <div class="dropzone-item" style="display:none;">
                                        <div class="dropzone-file">

                                            <div class="card text-center">
                                                <div class="card-header p-1" data-dz-name>
                                                    Featured
                                                </div>
                                                <div class="card-body p-0">
                                                    <img class="rounded img-fluid img-thumbnail" data-dz-thumbnail src="{{ asset('admin/img/photo1.png') }}">
                                                </div>

                                                <div class="card-footer">
                                                    <a href="#" class="link-black text-sm mr-2"><i class="fas fa-eye icon-sm"></i></a>
                                                    <a href="#" class="link-black text-sm" data-dz-remove><i class="fas fa-trash icon-sm"></i></a>
                                                    <span class="float-right" data-dz-size>2 days ago</span>
                                                </div>
                                            </div>

                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>

                    </div>
                    <!-- Tab 4-->
                </div>


            </div>
        </div>
    </div>
</div>

reference link

It’s okay if I just use this code on the blade

Are you importing it correctly ?

@livewire('component-name')

or

<livewire:component-name />
@foreach($allFeature['categories'] as $key)
         <option value="{{ $key->id }}">{{ $key->name }}</option>

maybe you need to check this above statement, because if $allFeature[‘categories’] retrieve you a collection or an array isn’t access to any id. Instead must be something like

@foreach($allFeature['categories'] as $key => $item)
           <option value="{{ $item[$key]->id }}">{{ $item[$key]->name }}</option>
1 Like

Thanks for your help

1 Like