Laravel Livewire 上的 select2 不起作用

Posted 2023-05-07

【中文标题】Laravel Livewire 上的 select2 不起作用

【英文标题】：select2 on Laravel Livewire does not work

【发布时间】：2020-12-16 22:16:43

【问题描述】：

按照官方文档的说明，我在 select 中实现了 select2，但我无法让它完全工作。

<div>
<div wire:ignore>
    <select class="js-example-basic-single" name="state">
        <option value="AL">Alabama</option>
        <option value="WY">Wyoming</option>
    </select>

    <!-- Select2 will insert it's DOM here. -->
</div>

@push('scripts')
<script>
    $(document).ready(function() 
        $('.js-example-basic-single').select2();
        $('.js-example-basic-single').on('change', function (e) 
            @this.set('foo', e.target.value);
        );
    );
</script>
@endpush

如果我在视图中删除以下脚本，则 select2 组件呈现良好

$('.js-example-basic-single').on('change', function (e) 
                @this.set('foo', e.target.value);
            );

但我当然失去了所需的功能。

我使用的selct2添加链接如下

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="asset('SitioWeb/assets/select2/js/select2.min.js')"></script>

我错过了什么？

【问题讨论】：

控制台有错误吗？

你好，是的。 Uncaught SyntaxError: Invalid or unexpected token，标记行如下：@this.set('foo', e.target.value);

这有帮助吗？ addEventListener("livewire:load" 部分：github.com/livewire/livewire/issues/883#issuecomment-620181049

我没有收到同样的错误。

【参考方案1】：

你可以使用 Bootstrap-select

npm install bootstrap-select

对我来说效果很好。这是我的代码。

<div class="form-group">
    <label for="permissions"> __('role.permissions') </label>
    <div class="col-sm-10">
        <div wire:key="UNIQUE_KEY">
            <div wire:ignore>
                <select id="permissions" wire:model="permissions"
                        data-live-search="true"
                        data-actions-box="true"
                        title="__('generic.select')  __('role.permissions') "
                        name="permissions[]" data-
                        class="selectpicker permissions" multiple>
                    @foreach($list_permission as $permission)
                        <option value=" $permission->id "
                                data-subtext=" $permission->key   ' -'. $permission->table_name ">

                             __('permission.'.$permission->key) 
                        </option>
                    @endforeach
                </select>
            </div>
        </div>
        @error('permissions') <span class="text-danger"> $message </span> @enderror
    </div>
</div>

在脚本中：

   ....
   @push('scripts')
        <script>
            Livewire.restart();
            $(function () 
                $('.permissions').selectpicker();
            );
        </script>
    @endpush
</div>

在组件中

public $permissions = [];
public $old_permissions = [];

public function updatedPermissions()

    $filter_arrays = array_filter($this->permissions);
    $unique = array_unique($filter_arrays);
    $this->permissions = $unique;

更新中：

 if (! empty($this->old_permissions))
     $updateRole = $this->role->find($this->modelId)->permissions()->detach();
     $updateRole = $this->role->find($this->modelId)->permissions()->sync($validatedData['permissions']);

  elseif ($this->old_permissions != $this->permissions )
     $updateRole = $this->role->find($this->modelId)->permissions()->attach($validatedData['permissions']);
   

【讨论】：

效果很好......干杯

【参考方案2】：

由于 select2 的工作方式，livewire 的 wire:model 和 wire:change 可能不适用于 select2。 Livewire 的wire:model 和wire:change 与传统的html 选择控件完美配合。要将 select to 与 livewire 的 wire:model 和 wire:change 一起使用，请编写一个 js 代码从 select2 中获取选定的值，然后使用 Livewire.emit() 将选定的值发送到您的组件并从那里处理它。示例js代码如下：

    $(document).ready(function() 
        $('#id').select2();
        $('#id').on('change', function(e)  
            Livewire.emit('listenerReferenceHere', 
            $('#id').select2("val"));
        );
    );

您的 Livewire 组件：

...
protected $listeners = ['listenerReferenceHere'];

public function listenerReferenceHere($selectedValue)
 
    //Do something with the selected2's selected value here

我希望这会有所帮助...?

【参考方案3】：

我努力将 livewire 与 select2 结合起来，最终找到了解决方案。

UsersComponent.php

class Users extends Component

    public $users = [];

    public function mount()
    
        $this->users= User::all();
    

    public function render()
    
        return view('livewire.users');
    

然后

users.blade.php

<div class="col-sm-12 col-xl-3 m-b-30" wire:ignore >
    <div >
        <h4 class="sub-title" >USERS</h4>
        <select class="js-example-basic-single form-control-warning" name="states" >

            @foreach ($users as $user)
                <option value=" $user->id "> $user->name</option>
            @endforeach

        </select>
    </div>

</div>

index.blade.php

<p>
@livewire(livewire.users)
</p>