使用 Laravel/Vuexy/Select2 进行多选时的布局问题

Question

我在项目中使用 Laravel + Vuexy + Select2 进行多重选择时遇到布局问题。我密切关注文档，但对于多重选择，布局并未按预期显示，尽管它对于单选效果很好。

      <div class="form-group">
        <label for="group">{{ __('locale.filters.group') }}:</label>
        <select class="select2 form-select form-select-lg" data-allow-clear="true">
          @foreach ($groupOptions as $groupKey => $groupValue)
          <option value="{{ $groupKey }}" {{ in_array($groupKey, $groups) ? 'selected' : '' }}>
            {{ $groupValue }}</option>
          @endforeach
        </select>
      </div>

错误布局示例：

预期布局：

尝试遵循 Select2 的文档，完全没有影响。

我正在使用 Vuexy html + laravel temlate，从框中初始化 select2 / jquery。

/resources/assets/vendor/libs/select2/select2.js

import select2 from 'select2/dist/js/select2.full';

try {
  window.select2 = select2;
} catch (e) {}
select2();

export { select2 };

Answer 1

最后，我必须选择以下内容进入部分：

@section('vendor-style')
@vite([
  'resources/assets/vendor/libs/select2/select2.scss',
])
@endsection

@section('vendor-script')
@vite([
  'resources/assets/vendor/libs/select2/select2.js',
])
@endsection

@section('page-script')
@vite([
  'resources/assets/js/forms-selects.js',
])
@endsection

在此之后，一切正常。